/* CR-03 (website-brief.md 3.6.5): the thread design language, sitewide. Dividers, running-stitch frames,
   gold pinked labels and the stitched hover on links and buttons. main.css and site.js are unchanged:
   draw-on keys on the .is-in class site.js already adds to any [data-reveal]; data-reveal="thread" has no
   hidden state in main.css, so nothing is ever hidden or moved. Static under reduced motion or without JS. */
:root { --gold-swatch: #debe70; }

/* 1. Thread divider: a direct child of <main>, between two sections, on the ground of the section above. */
.ss-thread { height: 48px; }
.ss-thread--c100 { background: var(--cream-100); }
.ss-thread__in { max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; }
.ss-thread__line { flex: 1 1 auto; min-width: 0; height: 24px; overflow: visible; }
.ss-thread__end { flex: none; overflow: visible; }
.ss-thread path { fill: none; stroke: var(--green-900); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ss-thread__path { vector-effect: non-scaling-stroke; }
@media (min-width: 820px) { .ss-thread { height: 72px; } }
@media (prefers-reduced-motion: no-preference) {
	.js .ss-thread .ss-thread__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.js .ss-thread.is-in .ss-thread__path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
	.js .ss-thread .ss-thread__end { opacity: 0; }
	.js .ss-thread.is-in .ss-thread__end { opacity: 1; transition: opacity .3s ease 1.3s; }
}

/* 2. Running-stitch frame on allow-listed photographs (ss_frame() $extra "ss-stitch"): drawn on the
   frame's ::after, never on the <img> that carries the reveal clip. No dimension changes. */
.ss-stitch::after {
	content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
	--st: rgba(247, 244, 238, .85);
	background:
		repeating-linear-gradient(90deg, var(--st) 0 9px, transparent 9px 15px) left top / 100% 1.5px no-repeat,
		repeating-linear-gradient(90deg, var(--st) 0 9px, transparent 9px 15px) left bottom / 100% 1.5px no-repeat,
		repeating-linear-gradient(180deg, var(--st) 0 9px, transparent 9px 15px) left top / 1.5px 100% no-repeat,
		repeating-linear-gradient(180deg, var(--st) 0 9px, transparent 9px 15px) right top / 1.5px 100% no-repeat;
}

/* 5. Gold pinked label: text is green-900 only (5.97:1 on gold-swatch). The zigzag is a mask on the
   ground; padding keeps every glyph clear of the 6px teeth. */
.ss-swatch-label {
	display: inline-block; background: var(--gold-swatch); color: var(--green-900);
	font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; padding: 12px 16px;
	-webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x;
}
.ss-timeline__y.ss-swatch-label { font-size: 22px; line-height: 1.15; color: var(--green-900); justify-self: start; align-self: start; }
@media (forced-colors: active) { .ss-swatch-label { -webkit-mask: none; mask: none; border: 1px solid CanvasText; } }

/* 6. Stitched hover. The 1px underline stays in the box (made transparent) and a 1.5px running stitch is
   painted over it, so no height changes and the link stays identifiable. Focus outlines are untouched. */
.ss-link:not(.ss-link--arrow):hover, .ss-link--arrow:hover > span:first-child {
	border-bottom-color: transparent;
	background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px) left bottom / 100% 1.5px no-repeat border-box;
}
:is(.ss-btn--primary, .ss-btn--light):not(.ss-hero .ss-btn, .ss-ctaband .ss-btn) { position: relative; }
:is(.ss-btn--primary, .ss-btn--light):not(.ss-hero .ss-btn, .ss-ctaband .ss-btn):hover::after {
	content: ""; position: absolute; inset: 4px; pointer-events: none; opacity: .6;
	background:
		repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px) left top / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 10px) left top / 1px 100% no-repeat,
		repeating-linear-gradient(180deg, currentColor 0 6px, transparent 6px 10px) right top / 1px 100% no-repeat;
}