@media screen
{
	.writing-page { --palatino-stack: Athelas, Constantia, "Bitstream Charter", "URW Palladio L", "Roboto Slab", var(--android-serif), Palatino, "Palatino Linotype", Georgia, serif, var(--symbol-fonts); }
	.writing-page :is(main, nav) :is(li, li a) { display: block; }
	
	.writing-page :is(main, nav) li a
	{
		inline-size: 100%;
		block-size: 100%;
		padding-inline-start: var(--padding-double);
		padding-inline-end: var(--padding-double);
		padding-block-start: var(--padding-double);
		padding-block-end: var(--padding-double);
		margin-inline-start: 0;
		margin-inline-end: 0;
		margin-block-start: 0;
		margin-block-end: 0;
	}
	
	.writing-page :is(main, nav) li
	{
		padding-inline-start: 0;
		padding-inline-end: 0;
		padding-block-start: 0;
		padding-block-end: 0;
	}
	
	@media (prefers-reduced-motion: no-preference) and (18em <= width)
	{
		.writing-page { font-family: var(--palatino-stack); }
	}
	
	.writing-page
	{
		max-inline-size: 70rem;
		align-self: stretch;
		justify-self: center;
		justify-items: center;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		align-content: center;
		gap: var(--padding-standard);
	}
	
	.writing-page
	{
		--padding-half: round(nearest, .25rem, var(--rounding-interval));
		--padding-standard: round(nearest, .5rem, var(--rounding-interval));
		--padding-double: round(nearest, 1rem, var(--rounding-interval));
	}
	
	.writing-page :is(header, footer) :is(p, ul, ol)
	{
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		margin-inline-start: 0;
		margin-inline-end: 0;
		margin-block-start: 0;
		margin-block-end: 0;
		align-self: stretch;
		justify-self: stretch;
		justify-items: stretch;
		place-items: stretch;
	}
	
	.writing-page main :is(p, .poetry, blockquote)
	{
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		margin-inline-start: 0;
		margin-inline-end: 0;
		align-self: stretch;
		justify-self: stretch;
		justify-items: stretch;
		place-items: stretch;
	}
	
	.writing-page :is(main, nav) :is(ul, ol)
	{
		padding-inline-start: 0;
		padding-inline-end: 0;
		padding-block-start: 0;
		padding-block-end: 0;
		margin-inline-start: 0;
		margin-inline-end: 0;
		align-self: stretch;
		justify-self: stretch;
		justify-items: stretch;
		place-items: stretch;
	}
	
	.writing-page :is(header, main, footer, nav) :is(h1, h2, h3)
	{
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		margin-inline-start: 0;
		margin-inline-end: 0;
		align-self: stretch;
		justify-self: stretch;
		justify-items: stretch;
		place-items: stretch;
	}
	
	.writing-page :is(header, footer, main, nav)
	{
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		align-self: stretch;
		justify-self: stretch;
		justify-items: stretch;
		place-items: stretch;
	}
	
	@media (width <= 49.99em)
	{
		.writing-page main
		{
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			align-content: stretch;
			flex-direction: column;
			flex-wrap: wrap;
			align-self: stretch;
			justify-self: center;
			justify-items: center;
			place-items: center;
			gap: var(--padding-standard);
		}
		
		.writing-page :is(header, footer, nav)
		{
			display: flex;
			justify-content: flex-start;
			align-items: stretch;
			align-content: stretch;
			flex-direction: column;
			flex-wrap: wrap;
			align-self: stretch;
			justify-self: center;
			justify-items: center;
			place-items: center;
			gap: var(--padding-standard);
		}
		
		.writing-page :is(header, main, footer, nav) :is(ul, ol, p, .poetry, blockquote)
		{
			flex-basis: auto;
			flex-grow: 1;
			flex-shrink: 0;
		}
		
		.writing-page :is(header, main, footer, nav) :is(h1, h2, h3)
		{
			flex-basis: auto;
			flex-grow: 1;
			flex-shrink: 0;
		}
		
		.writing-page :is(header, main, footer, nav)
		{
			flex-basis: auto;
			flex-grow: 1;
			flex-shrink: 0;
		}
		
		.writing-page :is(main, nav) :is(ul, ol, p, .poetry, blockquote)
		{
			margin-inline-start: auto;
			margin-inline-end: auto;
			margin-block-start: 0;
			margin-block-end: 0;
		}
		
		.writing-page :is(main, nav) li
		{
			margin-block-start: var(--padding-standard);
			margin-block-end: var(--padding-standard);
			margin-inline-start: 0;
			margin-inline-end: 0;
		}
		
		.writing-page :is(header, nav) :is(p, .poetry, blockquote)
		{
			inline-size: 100%;
			max-inline-size: 40rem;
		}
		
		.writing-page :is(header, main, footer, nav) :is(ul, ol) { inline-size: 100%; }
	}
	
	@media (35em <= width)
	{
		.writing-page
		{
			--largest-font: round(nearest, 1.5rem, var(--rounding-interval));
			--larger-font: round(nearest, 1.25rem, var(--rounding-interval));
		}
		
		.writing-page
		{
			--padding-half: round(nearest, .5rem, var(--rounding-interval));
			--padding-standard: round(nearest, 1rem, var(--rounding-interval));
			--padding-double: round(nearest, 2rem, var(--rounding-interval));
		}
		
		.writing-page main :is(p, li, .poetry, blockquote, h2, h3) { --common-border-wide: .4rem; }
	}
	
	@media (50em <= width)
	{
		.writing-page main
		{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(20rem,1fr));
			gap: var(--padding-standard);
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page footer
		{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(20rem,1fr));
			gap: var(--padding-standard);
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page header
		{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(20rem,1fr));
			gap: var(--padding-standard);
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page nav
		{
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--padding-standard);
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page :is(main, nav) :is(ul, ol)
		{
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: var(--padding-standard);
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page footer p
		{
			align-self: stretch;
			justify-self: stretch;
			justify-items: stretch;
			place-items: stretch;
		}
		
		.writing-page :is(h1, h2, h3, nav), :is(main, nav, footer) .image-wrapper { grid-column: 1 / -1; }
		
		.writing-page :is(main, nav) li
		{
			margin-block-start: 0;
			margin-block-end: 0;
			margin-inline-start: 0;
			margin-inline-end: 0;
		}
		
		h1, h2, h3 { text-align: left; }
	}
	
	.writing-page main blockquote { background-color: hsl(0deg, 0%, var(--bw-bg-lightness)); }
	.writing-page :is(header.top-level, footer.top-level, main.top-level) { border-radius: 1rem; }
	
	.writing-page
	{
		--shiny-bg-hue-1: 20deg;
		--shiny-bg-hue-2: 30deg;
		--shiny-bg-hue-3: 40deg;
		--shiny-bg-hue-4: 50deg;
		--shiny-bg-hue-5: 60deg;
	}
	
	.writing-page :is(main, nav) :is(p, li, blockquote, h2)
	{
		border-color: hsl(var(--shiny-bg-hue-3), 50%, 50%);
		border-style: solid;
		border-width: var(--common-border-wide);
	}
	
	@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (18em <= width)
	{
		.writing-page :is(main, nav) :is(p, li, blockquote, h2) { border-image-slice: 1; }
		
		@media (prefers-color-scheme: light)
		{
			.writing-page :is(main, nav) :is(p, li, blockquote, h2) { border-image-source: linear-gradient(135deg, #ccc 0%, white 10%, hsl(var(--shiny-bg-hue-5), 100%, 75%) 25%, hsl(var(--shiny-bg-hue-3), 75%, 50%) 33%, hsl(var(--shiny-bg-hue-1), 50%, 75%) 50%, hsl(var(--shiny-bg-hue-4), 75%, 50%) 67%, hsl(var(--shiny-bg-hue-2), 50%, 25%) 75%, black 90%, #333 100% ); }
		}
		
		@media (prefers-color-scheme: dark)
		{
			.writing-page :is(main, nav) :is(p, li, blockquote, h2) { border-image-source: linear-gradient(-45deg, #ccc 0%, white 10%, hsl(var(--shiny-bg-hue-5), 100%, 75%) 25%, hsl(var(--shiny-bg-hue-3), 75%, 50%) 33%, hsl(var(--shiny-bg-hue-1), 50%, 75%) 50%, hsl(var(--shiny-bg-hue-4), 75%, 50%) 67%, hsl(var(--shiny-bg-hue-2), 50%, 25%) 75%, black 90%, #333 100% ); }
		}
	}
}