/* The Pocket Fells: what the theme cannot say. Unlayered, so each rule wins
   over Yeti without a specificity fight. Every rule below is either the
   page's own lettering or a gap the ledger carries under the GAP number in
   its comment. */

/* The hand. Yeti ships no fonts and expects the page to load its own.
   Variable, weight 300 to 800, an upright and an italic. */
@font-face {
	font-family: "Shantell Sans";
	src: url("/yeti/examples/article/fonts/shantell-sans-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Shantell Sans";
	src: url("/yeti/examples/article/fonts/shantell-sans-italic-latin.woff2") format("woff2");
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

/* The lettering: the title set close (its tracking is the theme's
   --yeti-tracking-heading), the running head's parts small and spaced like a
   book's folio. The page's own typography. */
h1 {
	line-height: 1.05;
}

.folio {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
	letter-spacing: 0.02em;
}

/* GAP-022: the running head. A nav's actions slot holds buttons at the end
   of the bar; a book's running head wants plain text there, the volume and
   the page number, in the pencil grey. The nav has no token for the actions'
   type. */
.nav > [data-actions] {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}

/* GAP-023: a plate's tone. The one photograph is a tipped-in plate in an ink
   world and is shown in greyscale; a frame has a ratio and no tone. */
.plate.photo img {
	filter: grayscale(1) contrast(1.05);
}

/* Captions in the same hand, set small and pencil grey, under the plate
   with a hairline of air. The page's own. */
figcaption {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
	margin-block-start: var(--yeti-space-xs);
}

/* The margin note is lettered a step lighter and in the pencil grey, with a
   short pen dash before it, as a note in a guide's margin is. The page's own. */
.breakout > [data-note] {
	font-weight: var(--yeti-weight-normal);
}

.breakout > aside[data-note]::before {
	content: "— ";
}

/* A chapter reads slowly: each section heading opens a wider pause from
   the text before it than a plain page would, through Yeti's heading
   token. */
.breakout {
	--yeti-heading-space-before: var(--yeti-space-3xl);
}

/* The contents list is a guide's index: numbered by the toc's own
   data-numbered, hover as an underline through --yeti-toc-hover, its rows
   set close through --yeti-toc-padding. The underline itself is the page's. */
.contents .toc a:hover {
	text-decoration: underline;
}


/* The height profile beside the contents: the pen line, the section pins,
   the heights, and the red pencil dot that travels down the line with the
   scroll. The page's own drawing. */
.profile {
	inline-size: 7.5rem;
	block-size: auto;
}

.profile .line {
	fill: none;
	stroke: var(--yeti-color-text);
	stroke-width: 1.2;
	stroke-linecap: round;
}

.profile .pin line {
	stroke: var(--yeti-color-text-muted);
	stroke-width: 1;
}

.profile .pin text,
.profile .h {
	font: 500 17px/1 "Shantell Sans", system-ui, sans-serif;
	fill: var(--yeti-color-text-muted);
	text-anchor: end;
}

.profile .h {
	text-anchor: end;
}

/* GAP-025: a marker that moves along a path as the page scrolls. The dot
   rides the profile on a scroll timeline: pure CSS, no script, and it sits at
   the summit where the timeline is unsupported or motion is reduced. */
.profile .dot {
	fill: var(--yeti-color-alert);
	offset-path: path("M30.0 30.0C31.2 35.5 34.1 52.2 37.3 63.3C40.5 74.3 44.6 85.4 49.2 96.5C53.7 107.6 59.6 118.7 64.4 129.8C69.2 140.8 73.2 151.9 78.0 163.0C82.8 174.1 88.2 185.2 93.3 196.3C98.3 207.3 103.4 218.4 108.5 229.5C113.6 240.6 119.2 251.7 123.8 262.8C128.4 273.8 134.0 290.5 136.0 296.0");
	offset-distance: 0%;
	animation: walk linear both;
	animation-timeline: scroll(root);
}

@keyframes walk {
	from { offset-distance: 0%; }
	to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.profile .dot {
		animation: none;
	}
}

/* The contents column: the sidebar's narrow width at the end, pinned with
   Yeti's data-sticky. The list first, the profile beneath it at its own
   width; on a phone the sidebar stacks and the contents follow the chapter,
   as a guide's index does (GAP-028 records why not under the standfirst). */
.contents {
	font-size: var(--yeti-text-md);
	color: var(--yeti-color-text);
	--yeti-sticky-offset: var(--yeti-space-lg);
}

/* The reading progress as a red pencil line on the top edge: its thickness
   through --yeti-progress-size, its place through --yeti-sticky-offset on
   the bar itself, its stacking from data-sticky (GAP-026 and GAP-029
   shipped; two tokens set on one element, so they live here). */
.progress[data-scroll] {
	--yeti-progress-size: 3px;
	--yeti-sticky-offset: 0;
}

/* The pull quote: lettered in the italic hand, a step larger, the pen bar at
   its start from the theme. The page's own. */
blockquote p {
	font-style: italic;
	font-size: var(--yeti-text-lg);
	line-height: 1.4;
}

/* The browser's own surfaces, in the book's colours: the selection here,
   the form accent from the framework. */
::selection {
	background-color: var(--yeti-color-alert-subtle);
	color: var(--yeti-color-text);
}