/* ==========================================================================
   Work For Us — the notice sheet
   One vacancy set as a printed notice: a card-blush sheet sealed at its
   corner by a green petal carrying the logo glyph. The four requirements
   carry one petal each, in logo order. As you read down them, the small mark
   beside the title fills until the CRCS mark is complete.

   Written in its FINAL state: the mark filled, every lozenge filled. Only
   html.nmark-live (set by pages/work.js once it is actually watching the
   rows) draws the empty outlines first, so with no JS, before it arms or
   under reduced motion the mark is simply there, assembled.
   ========================================================================== */

.notice-sec { padding-block: var(--section-y); }
.notice-sec__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}

.notice {
	--seal: clamp(120px, 11.46vw, 220px);   /* 220 @1920 */
	--mcol: 96px;                           /* the index's marker column: the mark sits in it too */
	grid-column: 2 / 12;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2rem, 5.2vw, 6.25rem);
	border-radius: var(--r-xl);
	background: var(--card-blush);
}

/* the seal: the corner of the sheet clips a green petal, the glyph knocked
   out of it in white and standing upright on the tilted petal */
.notice__seal {
	position: absolute;
	top: calc(var(--seal) * -0.27);
	right: calc(var(--seal) * -0.27);
	display: grid;
	place-items: center;
	width: var(--seal);
	aspect-ratio: 1;
	border-radius: 30%;
	background: var(--logo-green);
	rotate: 14deg;
	transition: rotate 0.7s var(--ease-out), scale 0.7s var(--ease-out);
	animation: petal-drift 18s ease-in-out 0.9s infinite alternate;
	--dx: -6px; --dy: 8px;
}
.notice__glyph {
	width: calc(var(--seal) * 0.1455);      /* 32px on the 220px seal */
	height: auto;
	color: var(--white);
	rotate: -14deg;
}
.js-reveal .notice-sec[data-reveal]:not(.is-revealed) .notice__seal { rotate: 0deg; scale: 0.8; }

/* head: the mark in the marker column, eyebrow and title in the text column */
.notice__head {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--mcol) minmax(0, 1fr);
	grid-template-areas: ". eyebrow" "mark title";
	column-gap: 1rem;
	padding-right: calc(var(--seal) * 0.4);  /* clear of the seal's corner */
	margin-bottom: clamp(2rem, 3.4vw, 4rem);
}
.notice__eyebrow { grid-area: eyebrow; margin: 0 0 1rem; color: var(--green-text); }
.notice__h {
	grid-area: title;
	margin: 0;
	font-size: var(--statement);
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* the notice mark: four petals, each an ink outline under its colour */
.nmark {
	grid-area: mark;
	align-self: start;
	width: clamp(40px, 3.333vw, 64px);
	height: auto;
	aspect-ratio: 1;
	overflow: visible;
}
.nmark__line {
	fill: none;
	stroke: var(--ink);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transition: opacity 0.35s ease;
}
.nmark__fill {
	transform-box: fill-box;
	transform-origin: center;
	transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
html.nmark-live .nmark__p:not(.is-on) .nmark__line { opacity: 1; }
html.nmark-live .nmark__p:not(.is-on) .nmark__fill { opacity: 0; transform: scale(0.4); }

/* the requirements: a ruled index on the sheet, lozenges in logo order */
.notice .index { margin: 0 !important; }
/* balanced: row 04 would otherwise leave 'support.' alone on its line at
   every width (the measure is in em, so the break never moves) */
.notice__index .index__text { max-width: 24em; text-wrap: balance; }
.notice__index .lz { transition: scale 0.45s var(--ease-out); }
/* each row's lozenge is empty until its row is read, then fills with its petal */
html.nmark-live .notice__index > li:not(.is-read) .lz {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--ink);
	scale: 0.8;
}
/* arming switches to the empty state without animating the un-filling */
html.nmark-arming .nmark__line,
html.nmark-arming .nmark__fill,
html.nmark-arming .notice__index .lz { transition: none !important; }

/* the application: the sentence with its own mailto, then the pill */
.notice__apply {
	margin: clamp(2rem, 3.4vw, 4rem) 0 0 calc(var(--mcol) + 1rem);
	max-width: 32em;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.45;
	color: var(--ink);
}
.notice__apply a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--green);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	overflow-wrap: anywhere;
	transition: text-decoration-color 0.2s ease;
}
.notice__apply a:hover { text-decoration-color: var(--ink); }
.notice__pill { margin: 1.75rem 0 0 calc(var(--mcol) + 1rem); }

/* the existing CTA band: lead and contact line in --body / ink, as specced */
main.t-work .cta-band .why__prose > p:first-child { color: var(--body); }

/* Masthead (compact): the chassis hangs petal A from the header, which on a
   compact masthead runs it past the masthead's foot, where overflow:clip cuts
   it flat. Anchored to the foot instead, it bleeds off the right and the top
   only, whatever the masthead's height. (≤1024 keeps the chassis corner.) */
@media (min-width: 1025px) {
	main.t-work .mast__petal--a { top: auto; bottom: clamp(2rem, 3.3vw, 4rem); }
}

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 860px) {
	.notice { grid-column: 1 / -1; --mcol: 44px; }   /* the index's own 44px marker column */
}

@media (max-width: 640px) {
	.notice { padding: 1.5rem; --seal: 120px; }
	/* the mark sits inline before the title, on the eyebrow's line */
	.notice__head {
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas: "mark eyebrow" "title title";
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 1.25rem;
		padding-right: 0;
	}
	.nmark { width: 40px; align-self: center; }
	.notice__eyebrow { margin: 0; padding-right: 90px; }
	.notice__h { font-size: 1.75rem; padding-right: 90px; }
	.notice__apply,
	.notice__pill { margin-left: 0; }
	.notice__pill .btn { width: 100%; white-space: normal; text-align: center; }
}