/*
 * The e-book shelf at liminalspacepsychology.com/resources/
 *
 * Self-contained. This page is not a mirror of a WordPress template and does
 * not load vip/style.css, so everything it needs is here — palette, chrome,
 * shelf, drawer, modal. The palette and faces are lifted from the Elementor
 * kit the rest of the site uses, so arriving here from the homepage should not
 * feel like leaving.
 *
 * The tile, drawer and badge rules are the lsp reading of what fayeevans.au
 * does on its own /resources page. They are written out again rather than
 * shared, because the two sites have different palettes, different type and
 * different constraints — fayeevans is spliced into an Elementor page and has
 * to fight the theme's button styling; this one owns its document.
 *
 * Cloudflare fronts this document root and caches hard, which is why
 * index.php stamps every reference to this file with its mtime. See
 * vip/asset.php for the incident that taught us to.
 */

:root {
	--accent:      #7c4bbb;
	--accent-dark: #63399a;
	--ink:         #2b2733;
	--muted:       #6b6577;
	--line:        #e6e0ef;
	--surface:     #faf8fc;
	--page:        #fbfafd;
	--veil:        rgba(43, 39, 51, 0.62);
	--serif:       'Playfair Display', Georgia, 'Times New Roman', serif;
	--sans:        'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--radius:      6px;

	/*
	 * The Elementor kit's own colours, under their own names.
	 *
	 * The variables above are this page's palette — softened purples chosen to
	 * sit behind cover art without competing with it. These four are the exact
	 * values liminalspacepsychology.com paints its own chrome in, and they are
	 * kept separate rather than folded into the ones above because they are not
	 * ours to tune: the menu button, the floating pill and the footer are
	 * copies of controls that exist over there, and they have to keep matching
	 * them. Anything drawn in a --wp- colour is a clone of something on the
	 * WordPress site; anything drawn in --accent is this page's own.
	 */
	--wp-primary:   #9c6fee;   /* the floating pill, the footer's type */
	--wp-secondary: #955ee8;   /* what both of those become on hover */
	--wp-accent:    #8237da;   /* the menu button, the footer's rules */
	--wp-blush:     #fadbf6;   /* the glyph inside a social icon */
	--figtree:      'Figtree', var(--sans);
}

* { box-sizing: border-box; }

body {
	/* 96px of head room, not the 48 the sign-in card uses: the menu button and
	   the account pill are fixed at the top of the viewport, and the shelf has
	   to start below them rather than under them.

	   No side padding: the shelf and the footer are different widths and set
	   their own gutters with width: min(), so a shared one here would have to be
	   subtracted back out of the wider of the two. */
	margin: 0;
	padding: 96px 0 0;
	background: var(--page);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
}

/* Set while a drawer or a modal is open. Without it the page behind scrolls
   under the overlay, which on a phone is indistinguishable from the dialog
   having lost your place. */
body.is-locked { overflow: hidden; }

img { max-width: 100%; }

/* ------------------------------------------------------------- the shelf */

/* The card holds nothing but covers now — no heading, no tagline, no standing
   instruction — so its padding is even on all four sides. There is no longer a
   top edge that means something different from the other three. */
.shelf {
	width: min(860px, 100% - 40px);
	margin: 0 auto;
	padding: 36px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.empty {
	margin: 0;
	color: var(--muted);
	font-style: italic;
}

/* -------------------------------------------------------------- the tiles */

/*
 * auto-fit with a capped track, not auto-fill with 1fr.
 *
 * 1fr shares out the leftover width, so two books in a shelf sized for four
 * became two very wide covers pinned to the left. Capping the track at 220px
 * keeps a cover the size of a cover however few there are, auto-fit drops the
 * empty tracks, and justify-content then centres what is left. A full shelf
 * looks the same as it did; a shelf with two books on it looks deliberate.
 */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
	justify-content: center;
	gap: 30px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A <button> when signed out and an <a> when signed in, so it has to shed both
   sets of default styling and look identical either way. */
.tile,
.tile:hover,
.tile:focus,
.tile:active,
a.tile:visited {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
}

/* 7/10, matching the covers themselves: the two rendered so far are 0.64 and
   0.71 wide, and this sits close enough to both that `cover` below trims a
   sliver rather than a band. object-position keeps that trim off the top,
   where the title of a book is. */
.cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 7 / 10;
	padding: 26px 22px 26px 30px;
	overflow: hidden;
	border-radius: 5px;
	text-align: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* The spine. One pale rule inset from the left edge is enough to read as a
   book rather than a coloured rectangle — and it sits above the artwork, so a
   real cover gets it too. */
.cover::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 11px;
	z-index: 1;
	width: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.cover--1 { background: linear-gradient(150deg, #7c4bbb, #5b3490); }
.cover--2 { background: linear-gradient(150deg, #8f6ac9, #6a45a6); }
.cover--3 { background: linear-gradient(150deg, #63399a, #422369); }
.cover--4 { background: linear-gradient(150deg, #a487d3, #74519f); }

.cover__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: inherit;
}

/* The fallback cover, for a book published before tools/make-covers.sh was
   last run. It is set in the tint, so a shelf that mixes rendered artwork with
   these still reads as one set. */
.cover__title {
	font-family: var(--serif);
	font-size: 1.12rem;
	line-height: 1.3;
	color: #fff;
	overflow-wrap: anywhere;
}

/* The veil. "Download" for a member whose tile is the file itself, "Get it now"
   for a visitor about to be shown the modal — index.php picks the word to
   match what the tile actually does, so it is never a promise the tile cannot
   keep. */
.veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--veil);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.tile:hover .cover,
.tile:focus-visible .cover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(60, 35, 100, 0.18);
}

.tile:hover .veil,
.tile:focus-visible .veil { opacity: 1; }

/* The ring belongs on the cover, which is what hover highlights too, and the
   cover is now the whole of the tile — but the element's own outline would
   still trace a box the same shape with square corners over the top of it. */
.tile:focus-visible { outline: none; }
.tile:focus-visible .cover {
	outline: 3px solid rgba(124, 75, 187, 0.45);
	outline-offset: 2px;
}

/* ------------------------------------------------------- the menu button */

/*
 * The site's header button, reproduced.
 *
 * Not "something in the same spirit" — these are the values off
 * liminalspacepsychology.com's own header widget, which is an Elementor button
 * in the kit's accent colour with the same fa-align-justify glyph this page
 * already used. 12px/24px padding around a 16px icon is what makes it 64 by 40;
 * the 3px corner and the 4px nudge on hover are that widget's too. The page it
 * is on changes, so the way back to the menu should not.
 */
.menu-btn {
	position: fixed;
	top: 10px;
	/* The header container over there is boxed at 95% of the viewport, so its
	   first control starts 2.5vw in. Floored at 14px so the button does not end
	   up against the edge of a phone. */
	left: max(14px, 2.5vw);
	z-index: 8000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--wp-accent);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease;
}

.menu-btn:hover {
	background: var(--wp-secondary);
	transform: translate(4px, 4px);
}

.menu-btn svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* --------------------------------------------------------- the site menu */

/*
 * Left-anchored and full height, which is what liminalspacepsychology.com's own
 * header does — this page is reached from that site and should behave the same
 * way when you go looking for the menu.
 *
 * [hidden] is what keeps it out of the accessibility tree and out of the tab
 * order when closed; the transform and opacity below are what make it move.
 * Those are two different jobs and both are needed: transform alone would leave
 * a closed drawer focusable off-screen, and display alone cannot animate.
 */
.drawer[hidden] { display: none; }

.drawer {
	position: fixed;
	inset: 0;
	z-index: 9500;
}

.drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(43, 39, 51, 0.7);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.drawer.is-open .drawer__scrim { opacity: 1; }

.drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: clamp(272px, 30vw, 380px);
	max-width: 88vw;
	padding: 92px 10% 40px;
	background: #fff;
	border-right: 1px solid var(--line);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__panel:focus { outline: none; }

.drawer__close {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.drawer__close:hover { color: var(--ink); }
.drawer__close svg { width: 20px; height: 20px; fill: currentColor; }

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

.drawer__list li + li { margin-top: 26px; }

.drawer__list a {
	font-size: 0.95rem;
	font-weight: 300;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ink);
	transition: color 0.18s ease;
}

.drawer__list a:hover,
.drawer__list a:focus-visible { color: var(--accent); }

/* ------------------------------------------------------- the account pill */

/*
 * The site's "Contact Us" floater, reproduced.
 *
 * Same pill, same colour, same lift on hover — the values are lifted from the
 * floating button on liminalspacepsychology.com, which is the only other
 * control of this shape on the site. Ours is anchored top right rather than
 * bottom right, so the two could sit on one page without colliding.
 *
 * It is a link, not a button with a menu under it. There is exactly one thing
 * to do here and the whole pill does it, which means signing out survives
 * resources.js failing to load: no script participates at all.
 */
.account {
	position: fixed;
	top: 10px;
	right: max(14px, 2.5vw);
	z-index: 8000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border: 0;
	border-radius: 50px;
	background: var(--wp-primary);
	color: #fff;
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.account:hover,
.account:focus-visible {
	background: var(--wp-secondary);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	color: #fff;
}

/*
 * The label swap.
 *
 * Both labels live in one grid cell, so the pill is as wide as the wider of
 * them and does not resize when the words change. That is not tidiness: a pill
 * that shrank under the pointer would slide out from beneath it, lose the
 * hover, grow back, and flicker between the two words indefinitely.
 *
 * Same trick for the two glyphs, in a cell fixed at the icon size.
 */
.account__icons,
.account__labels {
	display: grid;
	align-items: center;
	justify-items: center;
}

.account__icons { width: 24px; height: 24px; }

.account__icon,
.account__label {
	grid-area: 1 / 1;
	transition: opacity 0.3s ease;
}

.account__icon {
	width: 24px;
	height: 24px;
}

.account__label {
	max-width: 42vw;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account__icon--out,
.account__label--out { opacity: 0; }

.account:hover .account__icon--user,
.account:hover .account__label--user,
.account:focus-visible .account__icon--user,
.account:focus-visible .account__label--user { opacity: 0; }

.account:hover .account__icon--out,
.account:hover .account__label--out,
.account:focus-visible .account__icon--out,
.account:focus-visible .account__label--out { opacity: 1; }

/*
 * On a touch screen there is no hover to reveal what this does, and the first
 * tap would be the sign-out. So say so up front: the address is dropped from
 * the flow and the pill shrinks to the word it acts on.
 */
@media (hover: none) {
	.account__icon--user,
	.account__label--user { display: none; }

	.account__icon--out,
	.account__label--out { opacity: 1; }
}

/* ------------------------------------------------------------- the modal */

.modal[hidden] { display: none; }

.modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(43, 39, 51, 0.62);
	animation: modal-fade 0.2s ease;
}

.modal__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	/* An implicit auto row would take the height of the longest description,
	   the panel would clamp to the viewport, and the overflow below would cut
	   off whatever came past it — the button included. minmax(0, 1fr) lets the
	   row be shorter than its contents, so the columns are handed the panel's
	   height to divide up rather than a height of their own choosing. */
	grid-template-rows: minmax(0, 1fr);
	width: 100%;
	max-width: 720px;
	max-height: calc(100vh - 48px);
	/* The panel itself does not scroll — see .modal__desc. If it did, "Get It
	   Now" would be at the end of the scrolled content and could sit below the
	   fold, which is the one thing in here that must always be reachable. */
	overflow: hidden;
	background: #fff;
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(43, 39, 51, 0.32);
	animation: modal-rise 0.22s ease;
}

.modal__panel:focus { outline: none; }

@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-rise { from { opacity: 0; transform: translateY(10px); } }

.modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.86);
	color: var(--ink);
	cursor: pointer;
}

.modal__close:hover { background: #fff; }
.modal__close svg { width: 18px; height: 18px; fill: currentColor; }

.modal__media {
	display: flex;
	align-items: stretch;
	min-height: 0;
	padding: 26px 0 26px 26px;
}

/* max-height rather than letting the ratio decide: on a short screen the cover
   crops, exactly as it does on a tile, instead of pushing the panel past the
   viewport it is capped to. */
.modal__media .cover {
	width: 100%;
	max-height: 100%;
	align-self: center;
	transition: none;
}

/*
 * A column with one scrolling part in the middle.
 *
 * The eyebrow, the title and the actions all stay put; only the description
 * scrolls, and only when there is more of it than fits. That is what keeps the
 * button on screen no matter how long the copy for a book runs. min-height: 0
 * is what lets a flex child shrink below its content and is the whole reason
 * the description scrolls rather than the column growing.
 */
.modal__content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 34px 32px 30px;
}

.modal__desc {
	min-height: 0;
	overflow-y: auto;
}

.modal__eyebrow {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent);
}

.modal__title {
	margin: 0;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.modal__rule {
	width: 54px;
	height: 2px;
	margin: 16px 0;
	border: 0;
	background: var(--line);
}

.modal__desc p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--muted);
}

/* A book with its own copy runs to several paragraphs, and margin: 0 above —
   written when every modal held exactly one — ran them into a single block.
   Spacing goes between them rather than under each, so the gap above the
   actions row stays the one the panel was laid out with. */
.modal__desc p + p {
	margin-top: 0.85em;
}

.modal__actions {
	display: flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 26px;
}

.modal__button {
	display: inline-block;
	padding: 13px 26px;
	border-radius: 5px;
	background: var(--accent);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: none;
}

.modal__button:hover { background: var(--accent-dark); }

.modal__meta {
	font-size: 0.72rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--muted);
}

/* ------------------------------------------------------------ the footer */

/*
 * The site's footer, reproduced.
 *
 * Every number in this block is off the Elementor template it clones — the
 * 1280px measure, the 40% brand column, the 17px glyph in a 34px tile, the
 * hairlines above the copyright and below the disclaimer, Figtree at 14px for
 * everything except the name and the tagline. The one deliberate difference is
 * the year, which is rendered rather than typed, because a footer that has to
 * be edited every January is a footer that will be wrong every January.
 *
 * It is wider than the shelf on purpose. That is what the site does, and a
 * footer the width of the card above it would read as part of the card.
 */
.site-footer {
	width: min(1280px, 100% - 48px);
	margin: 72px auto 0;
	padding: 0 0 10px;
	font-family: var(--figtree);
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp-primary);
}

.site-footer p { margin: 0; }

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 40%;
	padding-bottom: 0.5em;
}

.site-footer__title {
	font-family: var(--sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}

.site-footer__tagline {
	padding-bottom: 5px;
	font-family: var(--sans);
	font-size: 13px;
	font-style: italic;
}

.site-footer__social {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0 0 10px;
	list-style: none;
}

/* 17px of glyph with half an em of padding all round, which is where 34 comes
   from. The 10% corner is Elementor's "rounded" shape, not a circle. */
.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10%;
	background: var(--wp-primary);
	color: var(--wp-blush);
	transition: opacity 0.3s ease;
}

.site-footer__social a:hover { opacity: 0.9; }

.site-footer__social svg {
	display: block;
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* Visible to a screen reader, invisible on the page: the icons are the labels
   here, and an icon is not a label to anything that cannot see it. */
.site-footer__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: 1vw 0;
	border-top: 1px solid var(--wp-accent);
	border-bottom: 1px solid var(--wp-accent);
}

.site-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
}

/* --------------------------------------------------------- responsive */

/* The footer's own breakpoints are the site's, which are Elementor's tablet and
   mobile widths — 1024 and 767 — and not the two this page uses for the shelf.
   Kept as they are rather than folded into the blocks below: this block clones
   a template, and the template changes shape here. */
@media (max-width: 1024px) {
	.site-footer { padding: 32px 0; }

	.site-footer__legal-row {
		align-items: flex-end;
		padding-top: 24px;
	}
}

@media (max-width: 767px) {
	.site-footer {
		width: min(1280px, 100% - 32px);
		padding: 10px 0;
	}

	/* The brand block takes the row to itself and the icons drop below it,
	   left-aligned under the name rather than centred in a column that is no
	   longer there. */
	.site-footer__brand { width: 100%; }

	.site-footer__social {
		justify-content: flex-start;
		padding-top: 10px;
	}

	.site-footer__legal-row {
		justify-content: center;
		gap: 8px;
	}

	/*
	 * Stacked, and a flex column rather than a grid one.
	 *
	 * Two rows of "artwork, then text" is a grid the moment it is also two
	 * columns, but stacked it stops paying its way: an fr row takes all of the
	 * free space before an auto row is allowed to grow into it, so the cover
	 * band collapses to nothing while the copy has room to spare. Flex asks the
	 * question the right way round — the cover takes the height it wants, up to
	 * its cap, and the text column is handed what is left.
	 */
	.modal__panel {
		display: flex;
		flex-direction: column;
	}

	/* The artwork becomes a band across the top rather than a column, capped so
	   a tall cover cannot push the title and the button off a short screen.
	   min-height goes back to auto: side by side the media has to shrink to the
	   panel's height, but stacked it is what holds the cover up. */
	.modal__media {
		flex: 0 0 auto;
		min-height: auto;
		max-height: 40vh;
		padding: 22px 22px 0;
		overflow: hidden;
	}

	/* A width, not auto. The artwork is positioned, so all this box has of its
	   own is its padding — asked what width it would like, it answers about
	   50px and the aspect ratio turns that into a stamp. Told the width, the
	   ratio gives it a cover's height, and the max-height it inherits trims
	   that to a band on a short screen rather than crowding out the copy. */
	.modal__media .cover {
		width: min(190px, 100%);
		margin: 0 auto;
		aspect-ratio: 7 / 10;
	}

	.modal__content {
		flex: 1 1 auto;
		padding: 24px 22px 26px;
	}
}

@media (max-width: 540px) {
	body { padding: 78px 0 0; }

	.shelf {
		width: min(860px, 100% - 28px);
		padding: 24px 20px;
	}

	/* Two covers side by side on a phone, said outright rather than left to
	   auto-fit. auto-fit counts how many of the widest track will fit, so on a
	   360px screen a 168px cap comes out as one column, and a shelf one book
	   wide reads as the list this page replaced. Two equal columns of whatever
	   is going, and the aspect ratio keeps each one a cover rather than a
	   poster. */
	.tile-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}

	.cover { padding: 18px 14px 18px 22px; }
	.cover__title { font-size: 0.96rem; }

	/* What the contact pill does on a narrow screen, at the width this page
	   breaks rather than the 600 the site uses. The menu button keeps its
	   size — it is 64px wide and there is nothing to trim. */
	.account { padding: 10px 18px; }
	.account__label { max-width: 46vw; }

	.modal { padding: 0; }
	.modal__panel { max-width: none; max-height: 100vh; border-radius: 0; }
}

/* Nothing here is load-bearing — the veil repeats a word the tile already
   carries, and the drawer arrives whether or not it slides — so it all comes
   off for anyone who has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
	.cover,
	.veil,
	.menu-btn,
	.account,
	.account__icon,
	.account__label,
	.site-footer__social a,
	.drawer__scrim,
	.drawer__panel,
	.drawer__list a {
		transition: none;
	}

	/* The label still has to change, and with no transition to carry it the
	   swap is simply instant. What comes off is the movement: the pill stops
	   lifting and the menu button stops sliding. */
	.menu-btn:hover,
	.account:hover,
	.account:focus-visible { transform: none; }

	.tile:hover .cover,
	.tile:focus-visible .cover { transform: none; }

	.modal__overlay,
	.modal__panel { animation: none; }
}

/* Chrome is for interacting, and paper cannot be interacted with. The footer
   stays: it is not chrome but the practice's name and its disclaimer, which is
   the part of this page most worth having on a printed copy. */
@media print {
	body { padding: 0; }
	.menu-btn,
	.account,
	.drawer,
	.modal { display: none !important; }
	.shelf { width: auto; border: 0; padding: 0; }
	.site-footer { width: auto; margin-top: 32px; }
	.veil { display: none; }
}