/*
 * Theme Name:   D. T. Stelmaszek
 * Theme URI:    https://dtstelmaszek.com
 * Author:       D. T. Stelmaszek
 * Description:  A block theme built from nothing for one author. No parent, no framework, no third-party code. Typeface self-hosted. Palette chosen from research and checked against WCAG 2.1 rather than picked by eye.
 * Version:      1.5.3
 * Requires at least: 6.5
 * Requires PHP: 7.4
 * License:      GNU General Public License v2 or later
 * Text Domain:  dts
 * */

:root { --dts-opsz-display: 60; --dts-opsz-text: 16; }

body { font-variation-settings: "opsz" var(--dts-opsz-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

h1, h2, .dts-hero { font-variation-settings: "opsz" var(--dts-opsz-display); letter-spacing: -0.02em; }

/* WordPress adds has-global-padding to every constrained container. Nest three of them (main > entry-content > group) and the padding stacks three times, which produced a stepped ragged left edge. The root keeps its padding; nothing inside it does. */
.entry-content.has-global-padding, main .wp-block-group.has-global-padding { padding-left: 0; padding-right: 0; }

/* WordPress prints its constrained-layout rule inline in <head>, AFTER this stylesheet, at the same specificity. These selectors carry one more class each, which settles it without !important. The bio says he wonders what is happening just outside the frame, so the page composes off-centre: content pinned to a left edge with real space beside it. */
/* Cap the CHILDREN, never the container: capping .entry-content itself meant nothing inside it could ever be wider, which is what stopped the cover shelf from breaking the measure. */
main.wp-block-group > * { margin-left: 0; margin-right: auto; }
.entry-content.wp-block-post-content > *, .dts-build.wp-block-group > * { max-width: 34rem; margin-left: 0; margin-right: auto; }
.dts-build.wp-block-group { max-width: none; }
@media (min-width: 60em) { .entry-content.wp-block-post-content > *, .dts-build.wp-block-group > * { max-width: 32rem; } }

.dts-hero { font-size: clamp(2.25rem, 10.5vw, 5rem); line-height: 0.96; font-weight: 400; max-width: 11ch; margin: 0 0 var(--wp--preset--spacing--40); text-wrap: balance; }

.dts-build p { margin-block: 0.9em; }

.dts-rule { border: 0; border-top: 1px solid var(--wp--preset--color--brass); width: 4rem; margin: var(--wp--preset--spacing--50) 0; opacity: 0.8; }

.dts-signup { max-width: 30rem; }
.dts-signup-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
@media (min-width: 34em) { .dts-signup-form { flex-direction: row; } .dts-signup-email { flex: 1 1 auto; } }
.dts-signup-email { padding: 0.85rem 1rem; border: 1px solid var(--wp--preset--color--foxed); background: transparent; color: var(--wp--preset--color--paper); font: inherit; font-size: 1rem; border-radius: 0; }
.dts-signup-email::placeholder { color: var(--wp--preset--color--muted); }
.dts-signup-email:focus-visible { outline: 2px solid var(--wp--preset--color--brass); outline-offset: 2px; }
.dts-signup-button { padding: 0.85rem 1.5rem; border: 1px solid var(--wp--preset--color--brass); background: var(--wp--preset--color--brass); color: var(--wp--preset--color--ink); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 0; min-height: 44px; }
.dts-signup-button:hover { background: transparent; color: var(--wp--preset--color--brass); }
.dts-signup-button:focus-visible { outline: 2px solid var(--wp--preset--color--paper); outline-offset: 2px; }

.dts-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dts-signup-note { margin-top: 0.75rem; font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.dts-signup-note a { color: inherit; }
.dts-notice { padding: 0.7rem 0 0.7rem 1rem; border-left: 2px solid var(--wp--preset--color--brass); margin: 1.25rem 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Colour is never a link's only signal: about 4% of people have red-green colour blindness (WCAG 1.4.1). */
.entry-content a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--brass); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

img { max-width: 100%; height: auto; }

/* --- the shelf ----------------------------------------------------------
   Covers are the one thing on this site that should break the 34rem measure.
   Mobile first: one column, so a cover fills the phone and reads as an object
   rather than a thumbnail. Three across only once there is room for it. */
.dts-shelf.wp-block-group { max-width: 58rem; }
.dts-shelf.wp-block-group > * { max-width: none; }

.dts-shelf-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: none; }
@media (min-width: 46em) { .dts-shelf-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.dts-shelf-grid figure { margin: 0; }
.dts-shelf-grid img { display: block; width: 100%; height: auto; border: 1px solid rgba(232,226,217,0.14); }
.dts-shelf-grid h2 { font-size: var(--wp--preset--font-size--large); margin: 0.9rem 0 0.1rem; line-height: 1.15; }
/* Two paragraphs under each cover now, doing different jobs: the blurb is
   there to be read, the status is a label. One rule making both brass and
   letterspaced turned the blurb into a caption. */
.dts-shelf-grid p { margin: 0; }
.dts-shelf-blurb {
	margin-top: 0.45rem;
	color: var(--wp--preset--color--foxed);
	font-size: 0.95rem;
	line-height: 1.45;
	text-wrap: pretty;
}
.dts-shelf-status {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--brass);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}


/* --- the ground has tooth ------------------------------------------------
   Flat #12100E reads as a black rectangle on a large screen. Three layers fix
   that without touching legibility:

     a brass wash from the top left and an oxblood one from the bottom right,
     both very weak, so the field is unevenly lit rather than uniform. Oxblood
     fails contrast for text at 2.30:1 and is marked decorative-only in the
     palette - as light behind the page it carries no text and is safe;

     a grain tile over the top, generated by the browser from an SVG filter,
     so there is no image to download and nothing to go soft on a retina
     screen. The tile is 200px and repeats, so the filter rasterises once
     rather than across the whole viewport.

   All three are fixed, so the page reads as printed ON the ground rather than
   sliding over it. Every text colour was measured against flat #12100E and the
   grain is far too weak to move any of those ratios. */
body {
	background-image:
		radial-gradient(900px 620px at 12% -8%, rgba(201, 162, 39, 0.07), transparent 62%),
		radial-gradient(760px 600px at 92% 108%, rgba(140, 47, 31, 0.075), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.12'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: auto, auto, 200px 200px;
	background-attachment: fixed, fixed, fixed;
}

/* The grain is decoration. Anyone who has asked for less of it gets none. */
@media (prefers-reduced-transparency: reduce) {
	body { background-image: none; }
}