/* ==========================================================================
   Post-short template — The Increasing Cost of Non-Compliance,
   CRCS Legal – SME Legal Award Winners, Warwickshire Law Society Presidents
   Dinner. Blog posts, so the green set; each has ONE instrument:
     cost    the figure line and the ledger (static figures)
     award   the rosette — the SME News mark inside the four petals
     dinner  the photo essay, lifted and dropped in the rhythm of the logo

   Everything is written in its FINAL state; start states live under
   .js-reveal [data-reveal]:not(.is-revealed). Chassis classes are only ever
   adjusted under .pshort (the <article>), never globally.

    1  Post masthead        6  Rosette (award)
    2  Article grid         7  Photo essay (dinner)
    3  Figure line (cost)   8  Lightbox
    4  Ledger (cost)        9  End matter
    5  Trio + help band    10  Responsive
   ========================================================================== */

/* 1. Post masthead ------------------------------------------------------- */
/* green petal A bleeds off the right; petal B is the next logo colour, navy */
.pshort .mast--post { --acc-b: var(--logo-navy); }
/* cols 1-9: every short-post title balances onto two lines that end well
   short of the petals (keep-out: nothing crosses x = 1180 at 1920) */
.pshort .mast--post .mast__h1 {
	grid-column: 1 / 10;
	font-size: var(--mast-post);
	line-height: 1.02;
	letter-spacing: -0.028em;
}
@media (min-width: 1025px) {
	/* A starts below the running head, so the rule and the right-hand label
	   (the cost post's 'SRA Fines') read on white, never over the petal's
	   corner: its top clears the rule by ~2rem at the container's right edge,
	   and it drifts down, not up (--dy), so the drift never closes the gap */
	.pshort .mast--post .mast__petal--a {
		width: min(26vw, 500px);
		top: calc(var(--header-h) + clamp(1.5rem, 3.1vw, 3.75rem) + 3.75rem);
		--dy: 16px;
	}
	/* tucked below-left of A, level with the title's second line */
	.pshort .mast--post .mast__petal--b {
		right: calc(min(26vw, 500px) - min(12vw, 230px) + 1.5vw);
		top: calc(var(--header-h) + 12vw);
	}
}
/* the meta row closes the masthead: the first block needs less air above */
.pshort .mast + .folio,
.pshort .mast + .pshort__sec { padding-top: clamp(1.5rem, 3vw, 3.5rem); }

.pshort__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	color: var(--ink);
}
.pshort__kicker .lz { width: 9px; }

/* meta row: date, category chip, reading time */
.pmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin: clamp(1.5rem, 2.4vw, 2.5rem) 0 0;
	font-size: var(--small);
	color: var(--body);
}
.pmeta > svg { width: 1.1em; height: 1.1em; flex: none; margin-right: -0.55rem; }
.pmeta__cat {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35em 0.95em;
	border-radius: 999px;
	background: var(--cat-tint);
	color: var(--cat-text);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--tiny);
	transition: background-color 0.2s ease;
}
.pmeta__cat .lz { width: 8px; background: var(--cat); }
.pmeta__cat:hover { background: var(--cat-pale); }
.pmeta__read { display: inline-flex; align-items: center; gap: 1.25rem; }
.pmeta__read::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

/* 2. Article grid --------------------------------------------------------
   The article sits on page column 3: prose to col 8, instruments to col 12,
   set-pieces break out to the full 12. Folios keep the chassis grammar with
   the numeral in cols 1-2 (their body becomes a 10-col grid, so the chassis
   w6 / w8 / w9 read 3-8 / 3-10 / 3-12). */
.pshort .folio__num { grid-column: 1 / 3; font-size: var(--numeral-sm); }
.pshort .folio__body { grid-column: 3 / -1; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.pshort .folio__h { font-size: var(--h2-sm); }

.pshort__sec { position: relative; padding-block: var(--section-y); }
.pshort__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: start;
}
.pshort__grid > * { grid-column: 3 / 9; margin: 0; }
.pshort__grid > .pshort__wide { grid-column: 3 / -1; }
/* the folio's top rule, for the headingless blocks */
.pshort__sec--ruled > .pshort__grid::before {
	content: '';
	grid-column: 1 / -1;
	border-top: var(--rule-strong);
	margin-bottom: clamp(2rem, 3.4vw, 4rem);
	transform-origin: left;
	transition: transform 0.8s var(--ease-out);
}
.js-reveal .pshort__sec--ruled[data-reveal]:not(.is-revealed) > .pshort__grid::before { transform: scaleX(0); }

/* short text set large (the dinner) */
.pshort__big {
	/* the measure, not the column: at ≤1024 the column widens to 3-12 (and
	   ≤860 to the full width) while --standfirst sits at its 18px floor, so
	   cap the line at ~70 characters; above 1024 cols 3-8 are narrower */
	max-width: 32em;
	margin-bottom: 1.1em !important;
	font-size: var(--standfirst);
	line-height: 1.55;
	color: var(--ink);
	text-wrap: pretty;
}
.pshort__big:last-child { margin-bottom: 0 !important; }
.pshort__big a {
	color: var(--blue-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.pshort__big a:hover { text-decoration-thickness: 2px; }
.pshort__sec--prose { padding-bottom: 0; }

.pshort__leadin {
	grid-column: 3 / 11 !important;
	margin-bottom: 1rem !important;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.35;
	color: var(--ink);
	text-wrap: balance;
}

/* .index--lead: the words before the first ' – ' lead, the rest follows.
   text-wrap on the block (.index__text), not the inline .index__lead span,
   where it would do nothing: no lead ends on one orphaned word */
.pshort .index--lead .index__text { font-size: var(--lead); line-height: 1.35; text-wrap: pretty; }
.pshort .index__rest {
	display: block;
	margin-top: 0.35em;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--base);
	line-height: 1.55;
	color: var(--body);
	text-wrap: pretty;
}

/* 3. Figure line (cost) --------------------------------------------------
   '£2,000' -> '£25,000' on one ink rule ending in a red lozenge. The run
   slides out from under a clip so the line appears to draw left to right —
   transform only. The numbers are static. */
.figline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(1rem, 2.1vw, 2.5rem);
	margin: clamp(1rem, 2vw, 2.5rem) 0 clamp(2.5rem, 4.2vw, 5rem) !important;
}
.figline__n {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.9;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
}
.figline__cur { font-size: 0.5em; vertical-align: 0.62em; margin-right: 0.06em; color: var(--acc-text); }
.figline__mid { display: grid; justify-items: center; row-gap: 0.4rem; min-width: 0; }
.figline__cap { color: var(--body); }
.figline__track { position: relative; width: 100%; height: 28px; overflow: hidden; }
.figline__run {
	position: absolute;
	inset: 0;
	transition: translate 0.9s var(--ease-out) 0.2s;
}
.figline__run::before {
	content: '';
	position: absolute;
	left: 0;
	right: 12px;
	top: 50%;
	border-top: 1px solid var(--ink);
}
.figline__head {
	position: absolute;
	right: 5px;
	top: 50%;
	width: 14px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--logo-red);
	translate: 0 -50%;
	rotate: 45deg;
}
.js-reveal [data-reveal]:not(.is-revealed) .figline__run { translate: -100% 0; }

/* 4. Ledger (cost) -------------------------------------------------------
   [amount 5fr | description 7fr]. The amounts never animate. */
.ledger {
	list-style: none;
	margin: 1.25rem 0 2.5rem !important;
	padding: 0;
	border-bottom: var(--rule);
}
.ledger__row {
	position: relative;
	display: grid;
	grid-template-columns: 5fr 7fr;
	column-gap: var(--card-gap);
	align-items: baseline;
	padding: clamp(1.25rem, 2.5vw, 3rem) 0;
	transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
/* the row's rule, drawn as its own layer so it can draw in */
.ledger__row::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	border-top: var(--rule);
	transform-origin: left;
	transition: transform 0.6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.ledger__row:first-child::before { border-top: var(--rule-strong); }
.ledger__amt {
	position: relative;
	padding-right: 3rem;
	text-align: right;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(2.5rem, 5vw, 6rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
}
.ledger__cur { font-size: 0.5em; vertical-align: 0.62em; margin-right: 0.05em; color: var(--acc-text); }
/* the red lozenge stands where the ' – ' was, level with the description's
   first line (both sit on the row's shared baseline) */
.ledger__lz {
	position: absolute;
	right: calc(1.5rem - 5px);
	bottom: calc(0.08em + 3px);
	width: 10px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--logo-red);
	rotate: 45deg;
}
.ledger__desc p {
	margin: 0;
	max-width: 36em;
	font-size: var(--read);
	line-height: 1.6;
	color: var(--body);
	text-wrap: pretty;
}
.ledger__desc p + p { margin-top: 0.8em; }
.js-reveal [data-reveal]:not(.is-revealed) .ledger__row { opacity: 0; translate: 0 12px; }
.js-reveal [data-reveal]:not(.is-revealed) .ledger__row::before { transform: scaleX(0); }

/* 5. Consequences trio and the help band (cost) -------------------------- */
.trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: clamp(2rem, 3.4vw, 4rem) !important;
	border-top: var(--rule-strong);
	/* closed like the ledger and the newsletter's trio: the cell dividers
	   never stop in open space */
	border-bottom: var(--rule);
}
.trio__cell { position: relative; padding: clamp(2.5rem, 3.6vw, 4rem) clamp(1rem, 1.7vw, 2rem) clamp(1.5rem, 2.4vw, 2.75rem) 0; }
.trio__cell + .trio__cell { padding-left: clamp(1rem, 1.7vw, 2rem); border-left: var(--rule); }
.trio__petal {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--c);
	translate: 0 -50%;
	rotate: 45deg;
	transition: scale 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
	transition-delay: calc(0.2s + var(--i, 0) * 90ms);
}
.trio__cell + .trio__cell .trio__petal { left: clamp(1rem, 1.7vw, 2rem); }
.trio__h { margin: 0 0 0.65em; font-size: var(--h4); line-height: 1.25; }
.trio__cell p { margin: 0; font-size: var(--base); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.js-reveal [data-reveal]:not(.is-revealed) .trio__petal { scale: 0.4; opacity: 0; }

/* the help band: the homepage Why band; the watermark straddles its top
   edge but only as far as the folio above's empty padding */
.pshelp { overflow: visible; }
.pshelp .why__decor {
	left: auto;
	right: 6%;
	top: calc(var(--section-y) * -0.8);
	transform: none;
}
.pshelp__grid { position: relative; z-index: 1; }
.pshelp__grid > .pshelp__h { grid-column: 1 / 7; margin-bottom: 0.45em; font-size: var(--h2); text-wrap: balance; }
.pshelp__grid > .pshelp__intro {
	grid-column: 1 / 8;
	margin-bottom: clamp(1.5rem, 2.5vw, 3rem);
	font-size: var(--standfirst);
	line-height: 1.5;
	color: var(--ink);
}
.pshelp__grid > .pshelp__index { grid-column: 1 / -1; }

/* 6. Rosette (award) -----------------------------------------------------
   A white tile holding the SME News mark, four logo petals behind it in the
   #i-logo formation, so the award sits at the centre of the flower. The
   flower is sized to its column so no petal leaves it. */
.pshort__sec--award .pshort__grid { align-items: center; }
.pshort__grid > .rosette {
	grid-column: 1 / 6;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
}
.rosette__flower { position: relative; width: 57%; aspect-ratio: 1; }
.rosette__tile {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(1.25rem, 2.5vw, 3rem);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	transition: scale 0.8s var(--ease-out), opacity 0.8s var(--ease-out);
}
.rosette__tile picture { display: block; width: 100%; max-width: 260px; }
.rosette__tile img { width: 100%; height: auto; }
.rosette__p {
	position: absolute;
	z-index: 0;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 28%;
	background: var(--c);
	rotate: 45deg;
	animation: rosette-drift var(--dur, 20s) ease-in-out var(--delay, 0s) infinite alternate;
	transition: scale 0.8s var(--ease-out) 0.15s, opacity 0.8s var(--ease-out) 0.15s;
}
/* each petal's centre sits just beyond the middle of its edge of the tile */
.rosette__p--yellow { --c: var(--logo-yellow); left: 29%; top: -27%; --dx: 0px; --dy: -10px; --dr: 4deg; }
.rosette__p--red    { --c: var(--logo-red);    left: -27%; top: 29%; --dx: -10px; --dy: 0px; --dr: -4deg; --delay: -5s; --dur: 22s; }
.rosette__p--green  { --c: var(--logo-green);  left: 85%; top: 29%; --dx: 10px; --dy: 0px; --dr: 4deg; --delay: -11s; --dur: 19s; }
.rosette__p--navy   { --c: var(--logo-navy);   left: 29%; top: 85%; --dx: 0px; --dy: 10px; --dr: -4deg; --delay: -8s; --dur: 21s; }
@keyframes rosette-drift {
	from { translate: 0 0; rotate: 45deg; }
	to   { translate: var(--dx) var(--dy); rotate: calc(45deg + var(--dr)); }
}
.js-reveal [data-reveal]:not(.is-revealed) .rosette__tile { scale: 0.96; opacity: 0; }
.js-reveal [data-reveal]:not(.is-revealed) .rosette__p { scale: 0.6; opacity: 0; }

.pshort__grid > .pshort__cites { grid-column: 6 / -1; }
.pshort__citeA { margin-top: 0 !important; }
.citeb {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	column-gap: clamp(1rem, 1.7vw, 2rem);
	align-items: center;
}
.citeb__photo { display: block; width: 120px; }
.citeb__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
	background: var(--band-blue-soft);
}
.citeb__t {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--statement-sm);
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--ink);
	text-wrap: balance;
}
.pshort__stand {
	max-width: 32em;
	margin: clamp(2rem, 3.4vw, 4rem) 0 0;
	font-size: var(--standfirst);
	line-height: 1.5;
	color: var(--body);
	text-wrap: pretty;
}
.pshort__pill { margin: clamp(1.5rem, 2.2vw, 2.5rem) 0 0; }
.pshort__pill .btn { text-align: left; }

/* 7. Photo essay (dinner) ------------------------------------------------
   Four photographs in the homepage portrait mask and its mirror. Column
   offsets follow the logo: the ends level, the second lifted, the third
   dropped; a lozenge tab marks the edge each petal holds in the mark. */
.essay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--card-gap);
	align-items: start;
}
.essay__item {
	position: relative;
	transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 100ms);
}
.essay__item--left,
.essay__item--right { margin-top: clamp(2rem, 3.33vw, 4rem); }
.essay__item--bottom { margin-top: clamp(4rem, 6.67vw, 8rem); }
.essay__link {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 12% 12% 34% 28% / 8% 8% 24% 34%;
	background: var(--band-blue-soft);
}
.essay__item:nth-child(even) .essay__link { border-radius: 34% 28% 12% 12% / 24% 34% 8% 8%; }
.essay__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.5s var(--ease-out);
}
.essay__link:hover .essay__img,
.essay__link:focus-visible .essay__img { scale: 1.03; }
.essay__tab {
	position: absolute;
	width: 14px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--c);
	rotate: 45deg;
	transition: scale 0.45s var(--ease-out);
	transition-delay: calc(0.35s + var(--i, 0) * 100ms);
}
.essay__item--left .essay__tab   { left: 0; top: 50%; translate: -50% -50%; }
.essay__item--top .essay__tab    { left: 50%; top: 0; translate: -50% -50%; }
.essay__item--bottom .essay__tab { left: 50%; bottom: 0; translate: -50% 50%; }
.essay__item--right .essay__tab  { right: 0; top: 50%; translate: 50% -50%; }
.js-reveal [data-reveal]:not(.is-revealed) .essay__item { opacity: 0; translate: 0 40px; }
.js-reveal [data-reveal]:not(.is-revealed) .essay__tab { scale: 0; }

/* 8. Lightbox (built by post_short.js; without it the links open the file) */
.lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 5vh clamp(4rem, 7vw, 8rem);
	border: 0;
	background: transparent;
	overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(12, 16, 24, 0.9); }
.lightbox__img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90vh;
	border-radius: var(--r-lg);
	object-fit: contain;
}
.lightbox[open] .lightbox__img { animation: lightbox-in 0.35s var(--ease-out); }
@keyframes lightbox-in { from { opacity: 0; scale: 0.97; } to { opacity: 1; scale: 1; } }
.lightbox__btn {
	position: fixed;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white);
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.lightbox__btn:hover { background: var(--green); }
.lightbox__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__btn--close { top: 1.25rem; right: 1.25rem; }
.lightbox__btn--prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lightbox__btn--next { right: 1.25rem; top: 50%; translate: 0 -50%; }
html.lightbox-open { overflow: hidden; }

/* 9. End matter ---------------------------------------------------------- */
.pshort__sec--end { padding-bottom: 0; }
.pshort__sec + .pshort__sec--end { padding-top: 0; }
.pshort__grid > .pshort__stmt { grid-column: 3 / 12; }
.pshort__stmt a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.pshort__stmt a:hover { text-decoration-color: var(--green); }
.pshort__stmt b { font-weight: 600; }
.pshort__grid > .pshort__share { grid-column: 3 / 9; }
.pshort .post-share { margin-top: clamp(2.5rem, 4vw, 4.5rem); border-top-color: var(--line); color: var(--body); }
.pshort__sec--end .pshort__stmt + .pshort__share .post-share { margin-top: clamp(2rem, 3vw, 3.5rem); }
.pshort__pnav { margin-bottom: clamp(1rem, 2vw, 2rem); }
.pshort__rel .svx__list { list-style: none; margin: 0; padding: 0; border-bottom: var(--rule-strong); }
.pshort__rel .svx__n .lz { width: 12px; }

/* 10. Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	/* the chassis sends the H1 full width under the corner petal; a post
	   title holds cols 1-8 instead, so it wraps short of petal A (x ≥ 737 at
	   1024) and needs no 18vw drop. Petal B would sit on the title: hidden. */
	.pshort .mast--post .mast__h1 { grid-column: 1 / 9 !important; padding-top: 4vw; }
	.pshort .mast--post .mast__petal--b { display: none; }
	.pshort__grid > * { grid-column: 3 / -1; }
	.pshort__grid > .pshort__stmt,
	.pshort__grid > .pshort__share { grid-column: 3 / -1; }
	.pshort__grid > .rosette { grid-column: 1 / 7; }
	.pshort__grid > .pshort__cites { grid-column: 7 / -1; }
	.pshelp__grid > .pshelp__h,
	.pshelp__grid > .pshelp__intro { grid-column: 1 / -1; }
	.trio__cell { padding-right: 1rem; }
}

/* petal A fills the top-right corner here, right under the running head: the
   label ('SRA Fines') takes its own row under the breadcrumb, on white. Not
   at ≤640, where the chassis stacks the run as a wrapping column: a 100%
   basis would push the label into a second column, off the screen. */
@media (min-width: 641px) and (max-width: 1024px) {
	.pshort .mast__right:not(:empty) { flex-basis: 100%; }
}

@media (max-width: 860px) {
	.pshort__grid { display: block; }
	.pshort__grid > * + * { margin-top: 1.25rem; }
	.pshort__sec--ruled > .pshort__grid::before { display: block; }
	.pshort__big { margin-bottom: 1em !important; }

	.figline { margin-bottom: 2rem !important; }

	.ledger__row { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; padding: 1.5rem 0; }
	.ledger__amt { padding-right: 0; text-align: left; justify-self: start; }
	.ledger__lz { position: static; display: inline-block; margin-left: 0.9rem; vertical-align: 0.12em; }

	.trio { grid-template-columns: minmax(0, 1fr); border-top: 0; }
	.trio__cell,
	.trio__cell + .trio__cell {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 0.5rem;
		padding: 1.5rem 0;
		border-left: 0;
		border-top: var(--rule);
	}
	.trio__cell:first-child { border-top: var(--rule-strong); }
	.trio__petal,
	.trio__cell + .trio__cell .trio__petal {
		position: static;
		grid-row: 1 / 3;
		width: 22px;
		margin: 0.35rem 0 0 4px;
		translate: none;
	}

	/* the rosette centres above the citations: the tile is 70vw (capped) and
	   the box reserves the petals' reach above and below it; at the narrowest
	   widths the side petals bleed off the viewport edges (html clips x) */
	.pshort__grid > .rosette {
		aspect-ratio: auto;
		width: 100%;
		padding-block: calc(min(70vw, 400px) * 0.36 + 10px);
	}
	.rosette__flower { width: min(70vw, 400px); }
	.rosette + .pshort__cites { margin-top: 0; }
	.pshort__citeA { margin-top: 0.5rem !important; }

	/* the essay becomes the homepage rail: 78% cards, snapping. A scroller
	   clips on both axes, and the focus ring paints 6px outside each link:
	   8px of padding all round keeps it whole, the -8px margin keeps the
	   first photograph on the grid line and scroll-padding keeps the snap there */
	.essay__list {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 8px;
		scrollbar-width: none;
		margin-left: -8px;
		margin-right: calc(var(--gutter) * -1);
		padding: 8px var(--gutter) 8px 8px;
	}
	.essay__list::-webkit-scrollbar { display: none; }
	.essay__item {
		flex: 0 0 78%;
		scroll-snap-align: start;
		margin-top: 0 !important;
	}
	.essay__tab { display: none; }
}

@media (max-width: 640px) {
	/* too narrow for cols 1-8 ('Warwickshire' would break): full width again,
	   dropped below the corner petal as the chassis does */
	.pshort .mast--post .mast__h1 { grid-column: 1 / -1 !important; padding-top: 26vw; }
	.figline { grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 0.25rem; }
	.figline__mid { width: 100%; justify-items: start; }
	.figline__n { font-size: 3rem; }
	.ledger__amt { font-size: 2.25rem; }
	.citeb { grid-template-columns: 88px minmax(0, 1fr); }
	.citeb__photo { width: 88px; }
	.lightbox { padding: 4rem 1rem; }
	.lightbox__btn--prev,
	.lightbox__btn--next { top: auto; bottom: 1.25rem; translate: none; }
}