/* Eleanor Gibson's CV (/cv/). Drawn by mu-plugins/ellie-cv.php from cv.json.
 *
 * The site's own palette and faces: calico, ink, terracotta; Fraunces for
 * her name and the headings, Jost to read, Barlow Condensed for anything that
 * would be woven or printed on a label. Three devices, all from the
 * workroom, and nothing else decorative:
 *   - a tape measure for the career, marked in years and months, that
 *     unrolls once when the page opens;
 *   - costume labels for the selected work, with the tacking stitch inside
 *     the edge that holds a label on while it is sewn;
 *   - the same tacking stitch as the rule over each section, which runs in
 *     as the section arrives, and tailor's tacks (x) for list markers.
 * With reduced motion, nothing moves. Printing gives a two-page CV. */

.cv {
	--cv-calico: var(--wp--preset--color--calico, #E8E3D9);
	--cv-ink: var(--wp--preset--color--ink, #1C1A17);
	--cv-terra: var(--wp--preset--color--terracotta, #9E4A2A);
	--cv-selvedge: var(--wp--preset--color--selvedge, #6E6455);
	--cv-chalk: var(--wp--preset--color--chalk-line, #C0B8A8);
	--cv-tape: #F3EEE6;
	--cv-linen: #EDE3CC;
	--cv-display: var(--wp--preset--font-family--display, Georgia, serif);
	--cv-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--cv-label: var(--wp--preset--font-family--credits, "Arial Narrow", sans-serif);
	--cv-ease: cubic-bezier(.25, .7, .2, 1);

	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 48px) 40px;
	color: var(--cv-ink);
	font-family: var(--cv-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.65;
}
.cv *, .cv *::before, .cv *::after { box-sizing: border-box; }
/* The page's own display rules (the Print button's inline-flex, the credits
   filter's flex) outrank the browser's [hidden], so without the script both
   showed and did nothing. */
.cv [hidden] { display: none !important; }
/* Resets inside :where(), so any class below outranks them. */
.cv :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
.cv :where(ul, ol) { padding: 0; list-style: none; }
.cv a { color: inherit; text-decoration-color: var(--cv-chalk); text-underline-offset: .18em; }
/* The site caps list items and paragraphs at a reading measure
   (main :where(p, li, ...):not(...):not(...):not(...), 0,3,1) and dashes the
   links inside them. The CV's rows and its own controls opt out, by id: a
   class-only opt-out lost to that rule and held every job row and credits
   year at 612px, a single column of credits 2,500px long. */
#cv :is(.cv-job, .cv-year, .cv-label, .cv-credit, .cv-milestones li, .cv-rail li, .cv-dl__menu li, .cv-contact, .cv-contact li) { max-width: none; }
.cv .cv-rail a, .cv .cv-dl__menu a { text-decoration: none; }
.cv a:hover { text-decoration-color: var(--cv-terra); }
.cv :focus-visible { outline: 2px solid var(--cv-terra); outline-offset: 3px; }

/* The offers bar is for clients, not for someone reading a CV. */
#ellie-offer-bar { display: none !important; }

/* ---- the bar ------------------------------------------------------------ */
.cv-bar {
	position: sticky; top: 0; z-index: 20;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-height: 60px; margin: 0 calc(-1 * clamp(16px, 4vw, 48px));
	padding: 8px clamp(16px, 4vw, 48px);
	background: var(--cv-calico);
	border-bottom: 1px solid transparent;
	transition: border-color .3s;
}
.cv.is-scrolled .cv-bar { border-bottom-color: color-mix(in srgb, var(--cv-chalk) 70%, transparent); }
.cv-bar__home {
	font-family: var(--cv-label); font-weight: 600; font-size: .8125rem;
	letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
	min-height: 44px; display: inline-flex; align-items: center;
}
.cv-bar__name {
	font-family: var(--cv-display); font-size: 1.125rem; opacity: 0; transform: translateY(4px);
	transition: opacity .3s, transform .3s var(--cv-ease); white-space: nowrap;
}
.cv-bar__name span { font-family: var(--cv-label); font-size: .75rem; letter-spacing: .16em; color: var(--cv-terra); margin-left: 6px; }
.cv.is-scrolled .cv-bar__name { opacity: 1; transform: none; }
.cv-bar__actions { display: flex; gap: 8px; align-items: center; }
@media (max-width: 640px) {
	.cv-bar__name { display: none; }
	/* Hung from the Download button, the menu ran 20px off the left of a
	   375px screen. On a phone it hangs from the pair of buttons instead. */
	.cv-bar__actions { position: relative; }
	.cv-bar .cv-dl { position: static; }
}

.cv-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 16px;
	font-family: var(--cv-label); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--cv-ink); background: transparent; border: 1px solid var(--cv-ink); border-radius: 0;
	cursor: pointer; text-decoration: none; list-style: none;
	transition: background-color .2s, color .2s;
}
.cv-btn:hover { background: var(--cv-ink); color: var(--cv-calico); }
.cv-btn:active { transform: translateY(1px); }
/* a. as well: .cv a (0,1,1) sets the link colour to inherit, which put ink on
   terracotta, well under 4.5:1. */
.cv-btn--solid, .cv a.cv-btn--solid { background: var(--cv-terra); border-color: var(--cv-terra); color: #fff; }
.cv-btn--solid:hover { background: var(--cv-ink); border-color: var(--cv-ink); }
.cv-btn::-webkit-details-marker { display: none; }

.cv-dl { position: relative; }
.cv-dl summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.cv-dl[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.cv-dl__menu {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
	width: min(300px, calc(100vw - 32px));
	background: var(--cv-tape); border: 1px solid var(--cv-chalk);
	box-shadow: 0 18px 40px -20px rgba(60, 40, 20, .45);
	padding: 6px 0;
}
.cv-dl__menu a { display: block; padding: 10px 16px; text-decoration: none; }
.cv-dl__menu a:hover, .cv-dl__menu a:focus-visible { background: var(--cv-calico); }
.cv-dl__menu b { display: block; font-family: var(--cv-label); font-weight: 600; font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; }
.cv-dl__menu span { display: block; font-size: .875rem; color: var(--cv-selvedge); }

/* ---- the hero ----------------------------------------------------------- */
.cv-hero { padding-top: clamp(32px, 6vw, 72px); }
.cv-eyebrow {
	font-family: var(--cv-label); font-weight: 600; font-size: .8125rem;
	letter-spacing: .24em; text-transform: uppercase; color: var(--cv-terra);
}
.cv-name {
	margin-top: 10px !important;
	font-family: var(--cv-display); font-weight: 400;
	font-size: clamp(3rem, 9vw, 6.75rem); line-height: .95; letter-spacing: -.015em;
	text-wrap: balance;
}
.cv-headline {
	margin-top: 14px !important;
	font-family: var(--cv-display); font-style: italic; font-weight: 400;
	font-size: clamp(1.375rem, 2.8vw, 2rem); line-height: 1.2; color: var(--cv-ink);
}
.cv-profile { margin-top: 22px; max-width: 62ch; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; }
.cv-profile p + p { margin-top: .8em; }
.cv-cta { margin-top: 22px !important; }

/* Her portrait beside the profile, on a screen wide enough to keep the
   profile at a reading measure. It is not printed, and the Word and text
   copies have none: a UK CV is read without a photo. */
.cv-portrait { display: none; margin: 0; }
.cv-portrait__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; background: var(--cv-linen); box-shadow: 0 26px 44px -30px rgba(60, 40, 20, .6); }
@media (min-width: 900px) {
	.cv-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 360px); gap: clamp(32px, 5vw, 64px); align-items: start; }
	.cv-portrait { display: block; margin-top: 18px; }
}
.cv-variant { animation: cv-in .45s var(--cv-ease); }
@keyframes cv-in { from { opacity: 0; transform: translateY(6px); } }

.cv-contact { margin-top: 24px !important; display: grid; gap: 2px; font-size: .9375rem; font-weight: 400; line-height: 1.6; }
.cv-contact ul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1.6em; }
.cv-contact__facts { color: var(--cv-selvedge); }
.cv-contact a { color: var(--cv-ink); display: inline-block; padding: 5px 0; line-height: 1.5; }
.cv-on-paper { display: none; }

.cv-for { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: end; gap: 10px 18px; }
.cv-for fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cv-for legend {
	padding: 0; margin-bottom: 8px;
	font-family: var(--cv-label); font-weight: 600; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cv-selvedge);
}
.cv-for__options { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--cv-ink); width: fit-content; }
.cv-for__options label { position: relative; cursor: pointer; }
.cv-for__options input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cv-for__options span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
	font-family: var(--cv-label); font-weight: 600; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase;
	transition: background-color .2s, color .2s;
}
.cv-for__options label + label span { border-left: 1px solid var(--cv-ink); }
.cv-for__options input:checked + span { background: var(--cv-ink); color: var(--cv-calico); }
.cv-for__options input:hover:not(:checked) + span { background: color-mix(in srgb, var(--cv-ink) 8%, transparent); }
.cv-for__options input:focus-visible + span { outline: 2px solid var(--cv-terra); outline-offset: 2px; position: relative; z-index: 1; }
@media (max-width: 520px) {
	.cv-for__options { width: 100%; }
	.cv-for__options label { flex: 1 1 100%; }
	.cv-for__options label + label span { border-left: 0; border-top: 1px solid var(--cv-ink); }
	.cv-for__options span { width: 100%; }
}
.cv-link {
	min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--cv-ink);
	font: 400 .9375rem var(--cv-body); text-decoration: underline; text-decoration-color: var(--cv-chalk); text-underline-offset: .2em;
}
.cv-link:hover { text-decoration-color: var(--cv-terra); }
.cv-said { font-size: .875rem; color: var(--cv-terra); font-weight: 400; min-height: 44px; display: inline-flex; align-items: center; }

/* ---- the tape measure --------------------------------------------------- */
/* The tape's container gives it a year's width in pixels (--yw, from cqw),
   so the length that runs on past 2026 carries the same marks. */
.cv-tape { margin-top: clamp(40px, 6vw, 64px); container-type: inline-size; }
/* The tape runs off the right of the screen; nothing else is allowed to. */
html:has(#cv), body:has(#cv) { overflow-x: clip; }
.cv-tape__band {
	--years: 14;
	--yw: calc((100cqw - 12px) / var(--years));
	position: relative; height: 58px;
	margin-left: 12px;
	/* Printed ticks over a linen tape: a fine weft, a finer warp and a grain,
	   on a cream that darkens a touch towards the lower edge, as a tape does
	   where it curls away from the light. */
	background:
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 88%, transparent) 0 1.5px, transparent 1.5px var(--yw)) 0 0 / 100% 24px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 62%, transparent) 0 1px, transparent 1px calc(var(--yw) / 2)) 0 0 / 100% 15px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 40%, transparent) 0 1px, transparent 1px calc(var(--yw) / 12)) 0 0 / 100% 8px no-repeat,
		/* the second scale, printed along the lower edge as on a two-sided
		   tape: seasons, with the half-year a little longer */
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 55%, transparent) 0 1px, transparent 1px calc(var(--yw) / 2)) 0 100% / 100% 11px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 38%, transparent) 0 1px, transparent 1px calc(var(--yw) / 4)) 0 100% / 100% 6px no-repeat,
		repeating-linear-gradient(0deg, rgba(110, 80, 40, .05) 0 1px, transparent 1px 2.5px),
		repeating-linear-gradient(90deg, rgba(110, 80, 40, .035) 0 1px, transparent 1px 2px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .22 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #F3E9D2, var(--cv-linen) 55%, #E2D4B5);
	border-top: 1px solid rgba(90, 68, 38, .36);
	border-bottom: 1px solid rgba(90, 68, 38, .48);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		inset 0 -3px 4px -2px rgba(90, 60, 25, .18);
	/* One shadow for the whole length, the part past 2026 included, so there
	   is no seam where the two meet. */
	filter: drop-shadow(0 1px 1px rgba(60, 40, 20, .14)) drop-shadow(0 6px 5px rgba(60, 40, 20, .26));
}
/* The tape doesn't stop at 2026: it runs on off the right of the screen,
   the same linen with the same marks and edges, under the same sheen. */
.cv-tape__band::before {
	content: ""; position: absolute; left: 100%; top: -1px; bottom: -1px;
	width: calc((100vw - 100cqw) / 2 + 2px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, 0) 52%, rgba(80, 55, 25, .07) 100%) 0 1px / 100% calc(100% - 2px) no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 88%, transparent) 0 1.5px, transparent 1.5px var(--yw)) 0 1px / 100% 24px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 62%, transparent) 0 1px, transparent 1px calc(var(--yw) / 2)) 0 1px / 100% 15px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 40%, transparent) 0 1px, transparent 1px calc(var(--yw) / 12)) 0 1px / 100% 8px no-repeat,
		/* the second scale, printed along the lower edge as on a two-sided
		   tape: seasons, with the half-year a little longer */
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 55%, transparent) 0 1px, transparent 1px calc(var(--yw) / 2)) 0 calc(100% - 1px) / 100% 11px no-repeat,
		repeating-linear-gradient(90deg, color-mix(in srgb, var(--cv-ink) 38%, transparent) 0 1px, transparent 1px calc(var(--yw) / 4)) 0 calc(100% - 1px) / 100% 6px no-repeat,
		repeating-linear-gradient(0deg, rgba(110, 80, 40, .05) 0 1px, transparent 1px 2.5px),
		repeating-linear-gradient(90deg, rgba(110, 80, 40, .035) 0 1px, transparent 1px 2px),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E %3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E %3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .22 0'/%3E%3C/filter%3E %3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
		linear-gradient(180deg, #F3E9D2, var(--cv-linen) 55%, #E2D4B5);
	border-top: 1px solid rgba(90, 68, 38, .36);
	border-bottom: 1px solid rgba(90, 68, 38, .48);
	border-top: 1px solid rgba(90, 68, 38, .36);
	border-bottom: 1px solid rgba(90, 68, 38, .48);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 4px -2px rgba(90, 60, 25, .18);
	box-sizing: border-box;
}
/* The sheen of a coated tape: over the printing, under the pegs and the tip. */
.cv-tape__band::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .42) 0, rgba(255, 255, 255, .1) 30%, rgba(255, 255, 255, 0) 52%, rgba(80, 55, 25, .07) 100%);
}
/* The brass tip, riveted on, with the lip that hooks over a hem. */
.cv-tape__hook {
	position: absolute; left: -12px; top: -4px; bottom: -4px; width: 13px; z-index: 2;
	border-radius: 2px 1px 1px 2px;
	background:
		radial-gradient(circle at 7px 32%, #f6e7bd 0 .9px, #836c3f 1.3px 2.1px, transparent 2.5px),
		radial-gradient(circle at 7px 68%, #f6e7bd 0 .9px, #836c3f 1.3px 2.1px, transparent 2.5px),
		linear-gradient(90deg, #6d5a33, #c8b27a 30%, #efe0b0 48%, #b59a5e 70%, #7b6637);
	box-shadow: 0 2px 3px -1px rgba(50, 35, 15, .45), inset -1px 0 0 rgba(60, 45, 20, .35);
}
.cv-tape__hook::before {
	content: ""; position: absolute; left: -2px; top: -3px; bottom: -3px; width: 3px; border-radius: 1.5px;
	background: linear-gradient(90deg, #5d4c29, #b39a60 60%, #7b6637);
}
.cv-tape__year {
	position: absolute; top: 25px; padding-left: 4px;
	font-family: var(--cv-label); font-weight: 600; font-size: .8125rem; letter-spacing: .04em; color: var(--cv-terra);
	mix-blend-mode: multiply; /* printed into the tape, not laid on it */
}
.cv-tape__year.is-future { opacity: .5; }
@media (max-width: 720px) {
	.cv-tape__year.is-odd { display: none; }
}
/* Each milestone is pinned with the classic pearl-headed dressmaker's pin
   she works with, one colour each (--pin) and each at its own angle (--tilt),
   both from the plugin. The head is a pearl, lit from the upper left; the
   steel shaft is tinted where it meets the head and fades as it passes into
   the tape. On a wide screen the pins whose captions hang below go in from
   the lower edge. */
.cv-tape__pin {
	position: absolute; top: -22px; z-index: 2; width: 12px; height: 44px; margin-left: -6px;
	rotate: var(--tilt, 0deg); transform-origin: 50% 6px;
	transition: translate .3s var(--cv-ease), scale .3s var(--cv-ease);
}
.cv-tape__pin::before {
	content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%;
	background:
		radial-gradient(circle at 33% 29%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 27%),
		radial-gradient(circle at 64% 74%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 42%),
		radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--pin, #9E4A2A) 72%, #fff) 0, var(--pin, #9E4A2A) 48%, color-mix(in srgb, var(--pin, #9E4A2A) 68%, #000) 100%);
	box-shadow: 0 2px 2px -.5px rgba(40, 28, 16, .42);
}
.cv-tape__pin::after {
	content: ""; position: absolute; left: 5.4px; top: 9px; width: 1.2px; height: 34px; border-radius: 0 0 1px 1px;
	background: linear-gradient(180deg, var(--pin, #9E4A2A) 0 3px, #e1e4e7 3px, #a3a8ad 40%, rgba(163, 168, 173, .45) 62%, rgba(163, 168, 173, .08) 100%);
	box-shadow: .7px .6px 1px rgba(40, 30, 20, .22);
}
.cv-tape__pin.is-hot { translate: 0 -3px; scale: 1.12; }
.cv-milestones {
	margin-top: 22px !important;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 24px;
	font-size: .875rem; font-weight: 400; line-height: 1.45; color: var(--cv-selvedge);
}
.cv-milestones b { display: block; font-family: var(--cv-label); font-weight: 600; font-size: .9375rem; letter-spacing: .06em; color: var(--cv-terra); }
.cv-milestones li { transition: color .2s; }
.cv-milestones li.is-hot { color: var(--cv-ink); }

/* Wide enough, each milestone hangs from its own pin on a short thread:
   alternate ones above and below the tape, so 2017 and 2018, a year apart,
   never share a row. The widths (--w) come from the plugin, which gives each
   the room up to the next pin on its side. Set evenly in a row, as before,
   the captions sat under the wrong years and the seventh dropped to a row
   of its own. */
@media (min-width: 960px) {
	.cv-tape { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 58px auto; }
	.cv-tape__band { grid-row: 2; grid-column: 1; }
	.cv-milestones {
		grid-row: 1 / 4; grid-column: 1;
		display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
		margin: 0 0 0 12px !important; gap: 0; pointer-events: none;
	}
	/* Placed by offset, not margin: the site pins margin-inline to 0 with
	   !important on every list item (main :where(p, li, ...)). */
	.cv-milestones li {
		position: relative; left: calc(var(--x) - 5px); grid-column: 1; grid-row: 1; align-self: end;
		width: var(--w); padding: 0 12px 38px 0;
		pointer-events: auto;
	}
	.cv-milestones li::after {
		content: ""; position: absolute; left: 5px; bottom: 23px; height: 11px;
		border-left: 1px solid color-mix(in srgb, var(--cv-terra) 55%, transparent);
	}
	.cv-milestones li:nth-child(even) { grid-row: 3; align-self: start; padding: 40px 12px 0 0; }
	.cv-milestones li:nth-child(even)::after { top: 23px; bottom: auto; height: 13px; }
	.cv-tape__pin.is-below { top: auto; bottom: -22px; transform-origin: 50% calc(100% - 6px); }
	.cv-tape__pin.is-below::before { top: auto; bottom: 0; }
	.cv-tape__pin.is-below::after { top: auto; bottom: 9px; border-radius: 1px 1px 0 0; background: linear-gradient(0deg, var(--pin, #9E4A2A) 0 3px, #e1e4e7 3px, #a3a8ad 40%, rgba(163, 168, 173, .45) 62%, rgba(163, 168, 173, .08) 100%); }
	.cv-tape__pin.is-below.is-hot { translate: 0 3px; }
	.cv-milestones li.is-end { justify-self: end; left: auto; right: calc(100% - var(--x) - 5px); padding-right: 0; padding-left: 12px; text-align: right; }
	.cv-milestones li.is-end::after { left: auto; right: 5px; }
	.cv-milestones li.is-hot::after { border-left-color: var(--cv-terra); }
}

/* The roll-out, once, when the tape comes into view. It is pulled in from
   the right, brass tip first, quick and then slowing as it settles; then the
   pins go in one at a time, left to right, each dropping in a little large
   and pressing home, and its caption comes up after it. Without the script
   everything is simply there; with reduced motion, nothing moves. */
/* Transitions live on the rolled-out state only: on the waiting state they
   animated the tape out to the right and the captions away, and the roll-out
   then cut in before either had finished. The waiting state is set before
   the first paint (an inline script at the top of the CV), so nothing moves
   until the tape is in view. */
.cv.is-js .cv-tape__band { transform: translateX(calc(100cqw + 24px)); }
.cv.is-unrolled .cv-tape__band { transform: none; transition: transform 1.9s cubic-bezier(.17, .84, .32, 1); }
.cv.is-js .cv-tape__pin { opacity: 0; }
.cv.is-unrolled .cv-tape__pin { animation: cv-pin-in .55s cubic-bezier(.3, .7, .25, 1) both; animation-delay: calc(1.75s + var(--i) * .32s); }
@keyframes cv-pin-in {
	0% { opacity: 0; transform: translateY(-18px) scale(1.35); }
	55% { opacity: 1; transform: translateY(1.5px) scale(.96); }
	100% { opacity: 1; transform: none; }
}
@media (min-width: 960px) {
	.cv.is-unrolled .cv-tape__pin.is-below { animation-name: cv-pin-in-below; }
}
@keyframes cv-pin-in-below {
	0% { opacity: 0; transform: translateY(18px) scale(1.35); }
	55% { opacity: 1; transform: translateY(-1.5px) scale(.96); }
	100% { opacity: 1; transform: none; }
}
.cv.is-js .cv-milestones li { opacity: 0; }
.cv.is-unrolled .cv-milestones li { opacity: 1; transition: opacity .5s calc(2.05s + var(--i) * .32s), color .2s; }

/* ---- body: section list beside the sections ----------------------------- */
.cv-body { margin-top: clamp(40px, 7vw, 88px); }
.cv-rail { display: none; }
@media (min-width: 1080px) {
	.cv-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 64px; }
	.cv-rail { display: block; }
	.cv-rail ol { position: sticky; top: 96px; padding-top: 30px; }
	.cv-rail li + li { margin-top: 2px; }
	.cv-rail a {
		position: relative; display: flex; align-items: center; min-height: 36px; padding-left: 20px;
		font-family: var(--cv-label); font-weight: 500; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
		color: var(--cv-selvedge); text-decoration: none; transition: color .2s;
	}
	.cv-rail a::before {
		content: "×"; position: absolute; left: 0; font-family: var(--cv-display); font-size: 1rem; color: var(--cv-terra);
		opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .2s, transform .3s var(--cv-ease);
	}
	.cv-rail a:hover, .cv-rail a[aria-current="true"] { color: var(--cv-ink); }
	.cv-rail a[aria-current="true"]::before { opacity: 1; transform: none; }
}

.cv-section { scroll-margin-top: 80px; }
.cv-section + .cv-section { margin-top: clamp(56px, 8vw, 88px); }
.cv-stitch { display: block; width: 100%; height: 4px; overflow: visible; }
.cv-stitch line { stroke: var(--cv-terra); stroke-width: 1.5; stroke-dasharray: 7 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cv.is-js .cv-stitch { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--cv-ease); }
.cv.is-js .cv-section.is-in .cv-stitch { clip-path: inset(0 0 0 0); }
.cv-section h2 {
	margin: 20px 0 28px !important;
	font-family: var(--cv-display); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1;
}

/* ---- costume labels ---------------------------------------------------- */
/* Columns by the room the section has (not the window, which the section
   list beside it changes), so the plugin's spans can be exact: the lead label
   takes two columns, and the version's last label takes what the final row
   has left (--tail2, --tail3), where seven labels in three columns used to
   end on an empty slot. */
#cv-work { container: cv-work / inline-size; }
.cv-labels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cv[data-for="costume"] .cv-label { order: var(--o-costume); }
.cv[data-for="conservation"] .cv-label { order: var(--o-conservation); }
.cv[data-for="bridal"] .cv-label { order: var(--o-bridal); }
@container cv-work (min-width: 540px) {
	.cv-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cv[data-for="costume"] .cv-label[data-last~="costume"],
	.cv[data-for="conservation"] .cv-label[data-last~="conservation"],
	.cv[data-for="bridal"] .cv-label[data-last~="bridal"] { grid-column: span var(--tail2, 1); }
	.cv[data-for="costume"] .cv-label[data-lead~="costume"],
	.cv[data-for="conservation"] .cv-label[data-lead~="conservation"],
	.cv[data-for="bridal"] .cv-label[data-lead~="bridal"] { grid-column: span 2; }
}
@container cv-work (min-width: 820px) {
	.cv-labels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cv[data-for="costume"] .cv-label[data-last~="costume"],
	.cv[data-for="conservation"] .cv-label[data-last~="conservation"],
	.cv[data-for="bridal"] .cv-label[data-last~="bridal"] { grid-column: span var(--tail3, 1); }
}
.cv-label {
	container: cv-label / inline-size;
	position: relative; display: flex; flex-direction: column;
	padding: 26px 26px 22px;
	background: var(--cv-tape);
	outline: 1px dashed color-mix(in srgb, var(--cv-terra) 75%, transparent); outline-offset: -9px;
	box-shadow: 0 1px 0 rgba(28, 26, 23, .06), 0 14px 26px -22px rgba(80, 50, 25, .55);
	transition: transform .3s var(--cv-ease), box-shadow .3s var(--cv-ease);
}
@media (hover: hover) {
	.cv-label:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: 0 1px 0 rgba(28, 26, 23, .06), 0 22px 34px -24px rgba(80, 50, 25, .6); }
}
.cv-label__meta { font-family: var(--cv-label); font-weight: 500; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-selvedge); }
.cv-label__production {
	margin-top: 8px !important;
	font-family: var(--cv-label); font-weight: 600; font-size: 1.0625rem; line-height: 1.25; letter-spacing: .07em; text-transform: uppercase;
}
.cv-label__piece { margin-top: 12px !important; font-family: var(--cv-display); font-size: 1.375rem; line-height: 1.25; }
.cv-label[data-lead] .cv-label__piece { text-wrap: balance; }
.cv-label__detail { margin-top: 10px !important; font-size: .98rem; line-height: 1.6; }
/* A line in her own words, where a card has room: it floats in the middle of
   whatever height the row leaves between the description and the credits. */
.cv-label__note {
	margin-top: auto !important; padding-top: 16px;
	font-family: var(--cv-display); font-style: italic; font-weight: 400;
	font-size: 1.1875rem; line-height: 1.35; color: var(--cv-terra); text-wrap: balance;
}
.cv-label__credits { margin-top: auto !important; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cv-label__credits dt { font-family: var(--cv-label); font-weight: 500; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-selvedge); }
.cv-label__credits dd { font-size: .9375rem; font-weight: 400; }
/* A photo sits inside the stitched edge, like a swatch on a sample card: on
   top of a narrow label, beside the words on a wide one (the label's own
   width decides, so it follows the lead and the last label in any version). */
.cv-label__inner, .cv-label__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cv-label__photo {
	position: relative; display: block; margin: 0 0 18px; overflow: hidden;
	aspect-ratio: var(--aspect, 4 / 3); background: var(--cv-linen); cursor: zoom-in;
}
.cv-label__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--cv-ease); }
.cv-label__photo:hover .cv-label__img { transform: scale(1.035); }
.cv-label__photo:focus-visible { outline-offset: 2px; }
.cv-label__count {
	position: absolute; right: 8px; bottom: 8px; padding: 6px 8px;
	font-family: var(--cv-label); font-weight: 600; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
	color: var(--cv-calico); background: rgba(28, 26, 23, .78);
}
/* A portrait photo on a stacked card takes up height the row leaves spare,
   up to about 1.6 times as tall as it is wide, so the card fills without a
   gap under its words. A landscape one would lose too much at the sides. */
@container cv-label (max-width: 479.98px) {
	.cv-label.has-photo .cv-label__photo.is-tall { flex: 3 0 auto; max-height: 160cqi; } /* cqi: the card's content box, the photo's width */
}
@container cv-label (min-width: 480px) {
	.cv-label.has-photo .cv-label__inner { flex-direction: row; gap: 26px; }
	.cv-label.has-photo .cv-label__photo { flex: 0 0 44%; margin: 0; aspect-ratio: auto; min-height: 300px; }
	/* Beside the photo, words with no credits to hold the foot sit level
	   with its middle, not at the top over an empty column. */
	.cv-label.has-photo:not(:has(.cv-label__credits, .cv-label__note)) .cv-label__text { justify-content: center; }
}
@container cv-label (min-width: 480px) {
	.cv[data-for="costume"] .cv-label[data-lead~="costume"] .cv-label__piece,
	.cv[data-for="conservation"] .cv-label[data-lead~="conservation"] .cv-label__piece,
	.cv[data-for="bridal"] .cv-label[data-lead~="bridal"] .cv-label__piece { font-size: clamp(1.625rem, 2.6vw, 2.125rem); }
}

/* ---- skills ------------------------------------------------------------ */
.cv-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 36px 48px; }
.cv[data-for="costume"] .cv-skill { order: var(--o-costume); }
.cv[data-for="conservation"] .cv-skill { order: var(--o-conservation); }
.cv[data-for="bridal"] .cv-skill { order: var(--o-bridal); }
.cv-skill h3, .cv-beyond h3 { font-family: var(--cv-label); font-weight: 600; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cv-terra); }
.cv-skill ul { margin-top: 12px; }
.cv-skill li, .cv-plain li { position: relative; padding-left: 24px; font-weight: 400; }
.cv-skill li + li { margin-top: 6px; }
.cv-skill li::before, .cv-plain li::before {
	content: "×"; position: absolute; left: 2px; top: -.05em;
	font-family: var(--cv-display); font-size: 1.05em; color: var(--cv-terra);
}

/* ---- experience and education ----------------------------------------- */
.cv-job { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 32px; padding: 18px 0; border-top: 1px solid color-mix(in srgb, var(--cv-chalk) 70%, transparent); }
.cv-job:last-child { border-bottom: 1px solid color-mix(in srgb, var(--cv-chalk) 70%, transparent); }
@media (min-width: 720px) { .cv-job { grid-template-columns: 190px minmax(0, 1fr); } }
.cv-job__when { font-family: var(--cv-label); font-weight: 500; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-selvedge); padding-top: 5px; }
.cv-job h3 { font-family: var(--cv-display); font-weight: 400; font-size: 1.375rem; line-height: 1.3; }
.cv-job h3 span { display: block; font-family: var(--cv-body); font-size: 1rem; font-weight: 400; color: var(--cv-selvedge); margin-top: 2px; }
.cv-job p { margin-top: 8px !important; max-width: 66ch; }

/* ---- credits ----------------------------------------------------------- */
.cv-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-credit__by { text-wrap: pretty; }
.cv-filter button {
	min-height: 44px; padding: 0 14px; cursor: pointer;
	font-family: var(--cv-label); font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--cv-ink); background: transparent; border: 1px solid var(--cv-chalk); border-radius: 0;
	transition: background-color .2s, color .2s, border-color .2s;
}
.cv-filter button span { margin-left: 6px; color: var(--cv-terra); font-weight: 500; }
.cv-filter button:hover { border-color: var(--cv-ink); }
.cv-filter button[aria-pressed="true"] { background: var(--cv-ink); border-color: var(--cv-ink); color: var(--cv-calico); }
.cv-filter button[aria-pressed="true"] span { color: #e7a584; }
.cv-count { margin-top: 14px !important; font-size: .9375rem; color: var(--cv-selvedge); font-weight: 400; }
.cv-years { margin-top: 18px !important; }
.cv-year { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 20px; padding: 16px 0; border-top: 1px dashed var(--cv-chalk); }
.cv-year__n { font-family: var(--cv-label); font-weight: 600; font-size: 1.5rem; line-height: 1.1; letter-spacing: .02em; color: var(--cv-terra); }
.cv-year ul { columns: 2 260px; column-gap: 32px; }
.cv-credit { break-inside: avoid; padding: 2px 0 10px; animation: cv-in .35s var(--cv-ease); }
.cv-credit__title { display: block; font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
.cv-credit__by { display: block; font-size: .9375rem; color: var(--cv-selvedge); line-height: 1.45; }
.cv-earlier { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--cv-chalk); max-width: 72ch; }
.cv-earlier p + p { margin-top: 12px !important; }
.cv-earlier b { font-weight: 500; }

.cv-plain li + li { margin-top: 10px; }
.cv-plain li { max-width: 66ch; }
.cv-beyond { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 48px; }
.cv-beyond p { margin-top: 10px !important; font-weight: 400; }

/* ---- the close and the foot -------------------------------------------- */
.cv-close__lead { font-family: var(--cv-display); font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.4; max-width: 34ch; }
.cv-close__actions { margin-top: 22px !important; display: flex; flex-wrap: wrap; gap: 12px; }
.cv-foot {
	margin-top: clamp(72px, 10vw, 120px); padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--cv-chalk) 70%, transparent);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
	font-size: .875rem; font-weight: 400; color: var(--cv-selvedge);
}
.cv-foot a { display: inline-block; padding: 3px 0; }

/* ---- the larger view of a label's photos ------------------------------- */
.cv-lightbox { width: fit-content; max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: var(--cv-calico); overflow: visible; }
.cv-lightbox::backdrop { background: rgba(20, 18, 15, .86); }
.cv-lightbox[open] { animation: cv-in .3s var(--cv-ease); }
.cv-lightbox figure { margin: 0; }
.cv-lightbox__img { display: block; width: auto; height: auto; max-width: min(92vw, 1100px); max-height: calc(100dvh - 150px); background: var(--cv-linen); }
.cv-lightbox__cap { margin-top: 12px; max-width: min(92vw, 1100px); font-family: var(--cv-display); font-size: 1.125rem; line-height: 1.3; }
.cv-lightbox__n { margin-left: 8px; font-family: var(--cv-label); font-weight: 600; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: #e7a584; }
.cv-lightbox__credit { display: block; margin-top: 4px; font: 400 .8125rem/1.4 var(--cv-body); color: color-mix(in srgb, var(--cv-calico) 70%, transparent); }
.cv-lightbox__credit:empty { display: none; }
.cv-lightbox__bar { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cv-lightbox .cv-btn { color: var(--cv-calico); border-color: color-mix(in srgb, var(--cv-calico) 70%, transparent); }
.cv-lightbox .cv-btn:hover { background: var(--cv-calico); border-color: var(--cv-calico); color: var(--cv-ink); }
.cv-refs { margin-top: 48px !important; }

/* ---- motion, only when it is welcome ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.cv *, .cv *::before, .cv *::after { animation: none !important; transition: none !important; }
	.cv.is-js .cv-stitch { clip-path: none; }
	.cv.is-js .cv-tape__band { transform: none; }
	.cv.is-js .cv-tape__pin { opacity: 1; transform: none; }
}

/* ---- print: two plain pages --------------------------------------------- */
@media print {
	/* A seam allowance all round. At 11mm and 13mm the text ran nearly to
	   the edge of the sheet, and a home printer's unprintable strip took
	   most of what was left. */
	@page { size: A4; margin: 16mm 18mm; }
	.cv-on-screen { display: none; }
	.cv-on-paper { display: inline; }
	html, body, .wp-site-blocks { background: #fff !important; }
	body > *:not(.wp-site-blocks), .wp-site-blocks > footer, .wp-site-blocks > header,
	.cv-bar, .cv-for, .cv-rail, .cv-tape, .cv-filter, .cv-cta, .cv-stitch, .skip-link,
	.ellie-status-bar, #ellie-offer-bar,
	.cv-portrait, .cv-label__photo, .cv-label__note, .cv-label__more, .cv-close, .cv-foot, .cv-lightbox { display: none !important; }
	.cv a::after { content: none !important; } /* the site's print styles append each address */
	.cv a { text-decoration: none; }
	.cv { max-width: none; padding: 0; font-size: 8.6pt; line-height: 1.4; color: #000; }
	.cv-hero { padding-top: 0; }
	.cv-eyebrow { font-size: 7pt; }
	.cv-name { font-size: 26pt; margin-top: 1pt !important; }
	.cv-headline { font-size: 12.5pt; margin-top: 3pt !important; }
	.cv-profile { font-size: 9pt; line-height: 1.45; max-width: none; margin-top: 6pt; }
	.cv-profile p + p { margin-top: 3pt; }
	.cv-contact { margin-top: 5pt !important; display: flex; flex-wrap: wrap; font-size: 7.5pt; line-height: 1.4; gap: 0 1.1em; color: #000; }
	.cv-contact ul { display: contents; }
	.cv-contact__facts { color: #000; }
	.cv-contact a { padding: 0; }
	.cv-body { display: block; margin-top: 8pt; }
	/* On paper, Education follows Skills: it fills the foot of page one, and
	   Experience and Credits get page two to themselves. */
	.cv-main { display: flex; flex-direction: column; }
	#cv-work { order: 1; } #cv-skills { order: 2; } #cv-education { order: 3; }
	#cv-education { break-inside: avoid; }
	#cv-experience { order: 4; } #cv-credits { order: 5; } #cv-beyond { order: 6; } #cv-close { order: 7; }
	.cv-section + .cv-section { margin-top: 8pt; }
	.cv-section h2 { font-size: 12pt; margin: 0 0 4pt !important; padding-top: 4pt; border-top: 1px dashed var(--cv-terra); break-after: avoid; }
	/* Three columns on paper, the lead and the last label two wide, so the
	   three rows are full. */
	.cv-labels { grid-template-columns: repeat(3, 1fr); gap: 4pt; }
	.cv[data-for="costume"] .cv-label[data-last~="costume"],
	.cv[data-for="conservation"] .cv-label[data-last~="conservation"],
	.cv[data-for="bridal"] .cv-label[data-last~="bridal"] { grid-column: span var(--tail3, 1); }
	.cv-label { padding: 5pt 7pt 5pt; box-shadow: none; outline-offset: -3pt; background: #fff; border: 1px solid var(--cv-chalk); break-inside: avoid; transform: none !important; }
	.cv-label__meta { font-size: 6.3pt; }
	.cv-label__production { font-size: 7.2pt; margin-top: 1pt !important; }
	.cv-label__piece, .cv[data-for] .cv-label[data-lead] .cv-label__piece { font-size: 9.3pt; margin-top: 2pt !important; }
	.cv-label__detail { font-size: 7.8pt; margin-top: 1pt !important; line-height: 1.3; }
	.cv-label__credits { padding-top: 3pt; gap: 0 9pt; }
	.cv-label__credits dt { font-size: 6.3pt; }
	.cv-label__credits dd { font-size: 7.2pt; }
	.cv-skills { grid-template-columns: repeat(3, 1fr); gap: 4pt 14pt; }
	.cv-skill h3 { font-size: 6.8pt; }
	.cv-skill ul { margin-top: 2pt; }
	.cv-skill li { font-size: 8.2pt; padding-left: 10pt; line-height: 1.3; }
	.cv-skill li + li { margin-top: 0; }
	.cv-job { grid-template-columns: 92pt 1fr; padding: 2.5pt 0; gap: 0 10pt; break-inside: avoid; }
	.cv-job__when { font-size: 6.8pt; padding-top: 1.5pt; }
	.cv-job h3 { font-size: 9pt; }
	.cv-job h3 span { font-size: 7.8pt; display: inline; margin-left: 4pt; }
	.cv-job p { margin-top: 0 !important; font-size: 8.2pt; max-width: none; line-height: 1.35; }
	.cv-count { display: none; }
	.cv-years { columns: 2; column-gap: 14pt; margin-top: 0 !important; }
	/* The year in a narrow gutter beside its titles: on a line of its own it
	   cost fourteen lines, and with the wider margins a third page. */
	.cv-year { display: grid; grid-template-columns: 21pt minmax(0, 1fr); gap: 0 3pt; padding: 1.5pt 0 1pt; border-top: 0; break-inside: avoid-column; }
	.cv-year__n { font-size: 8pt; line-height: 1.3; }
	.cv-year ul { columns: 1; display: block; }
	.cv-credit { padding: 0; animation: none; line-height: 1.3; }
	.cv-credit__title { display: inline; font-size: 8pt; }
	.cv-credit__by { display: inline; font-size: 7.4pt; }
	.cv-credit__by::before { content: " · "; }
	.cv-earlier { margin-top: 4pt; padding-top: 3pt; font-size: 7.6pt; line-height: 1.35; max-width: none; }
	.cv-earlier p + p { margin-top: 1pt !important; }
	.cv-plain li { font-size: 8.2pt; padding-left: 10pt; max-width: none; line-height: 1.35; }
	.cv-plain li + li { margin-top: 0; }
	.cv-beyond { grid-template-columns: repeat(4, 1fr); gap: 0 12pt; }
	.cv-beyond h3 { font-size: 6.8pt; }
	.cv-beyond p { margin-top: 1pt !important; font-size: 8.2pt; line-height: 1.35; max-width: none; }
}