/*
Theme Name: Wonky Dog
Template: wonkydog-base
Description: Riso look for Wonky Dog Records: ink colours, wavy patterns, two-ink artist photos. Child of the Wonky Dog Base theme; colours and fonts in theme.json.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: wonkydog
Update URI: false
*/

/* Patterns and shapes bleed off the page edges; the page itself never scrolls sideways. */
.wp-site-blocks { overflow-x: clip; }
::selection { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--contrast); }

/* Wordmark: big "wonky dog" (letters jostled, like the brand pack), small "records" under it. */
.dt-header { border-bottom: 0; }
.dt-wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.dt-wordmark a { display: inline-flex; flex-direction: column; text-decoration: none; }
.dt-wordmark__big { font-size: 1.25rem; white-space: nowrap; }
.dt-jo { display: inline-block; }
/* Hover: the letters hop between their jostle positions twice a second, like the brand pack's wd-jostle loop. */
@keyframes dt-jig0{0%{transform:translateY(0.032em) rotate(-1.6deg)}25%{transform:translateY(-0.032em) rotate(-3.2deg)}50%{transform:translateY(0.048em) rotate(-2.4deg)}75%{transform:translateY(-0.056em) rotate(0.0deg)}100%{transform:translateY(0.032em) rotate(-1.6deg)}}
.dt-jo:nth-of-type(1) { --dt-jig: dt-jig0; }
@keyframes dt-jig1{0%{transform:translateY(-0.056em) rotate(0.0deg)}25%{transform:translateY(0.048em) rotate(1.6deg)}50%{transform:translateY(-0.024em) rotate(1.6deg)}75%{transform:translateY(0.024em) rotate(2.4deg)}100%{transform:translateY(-0.056em) rotate(0.0deg)}}
.dt-jo:nth-of-type(2) { --dt-jig: dt-jig1; }
@keyframes dt-jig2{0%{transform:translateY(0.024em) rotate(2.4deg)}25%{transform:translateY(-0.040em) rotate(1.6deg)}50%{transform:translateY(0.032em) rotate(-1.6deg)}75%{transform:translateY(-0.032em) rotate(-3.2deg)}100%{transform:translateY(0.024em) rotate(2.4deg)}}
.dt-jo:nth-of-type(3) { --dt-jig: dt-jig2; }
@keyframes dt-jig3{0%{transform:translateY(-0.032em) rotate(-3.2deg)}25%{transform:translateY(0.048em) rotate(-2.4deg)}50%{transform:translateY(-0.056em) rotate(0.0deg)}75%{transform:translateY(0.048em) rotate(1.6deg)}100%{transform:translateY(-0.032em) rotate(-3.2deg)}}
.dt-jo:nth-of-type(4) { --dt-jig: dt-jig3; }
@keyframes dt-jig4{0%{transform:translateY(0.048em) rotate(1.6deg)}25%{transform:translateY(-0.024em) rotate(1.6deg)}50%{transform:translateY(0.024em) rotate(2.4deg)}75%{transform:translateY(-0.040em) rotate(1.6deg)}100%{transform:translateY(0.048em) rotate(1.6deg)}}
.dt-jo:nth-of-type(5) { --dt-jig: dt-jig4; }
@keyframes dt-jig5{0%{transform:translateY(-0.040em) rotate(1.6deg)}25%{transform:translateY(0.032em) rotate(-1.6deg)}50%{transform:translateY(-0.032em) rotate(-3.2deg)}75%{transform:translateY(0.048em) rotate(-2.4deg)}100%{transform:translateY(-0.040em) rotate(1.6deg)}}
.dt-jo:nth-of-type(6) { --dt-jig: dt-jig5; }
@keyframes dt-jig6{0%{transform:translateY(0.048em) rotate(-2.4deg)}25%{transform:translateY(-0.056em) rotate(0.0deg)}50%{transform:translateY(0.048em) rotate(1.6deg)}75%{transform:translateY(-0.024em) rotate(1.6deg)}100%{transform:translateY(0.048em) rotate(-2.4deg)}}
.dt-jo:nth-of-type(7) { --dt-jig: dt-jig6; }
@keyframes dt-jig7{0%{transform:translateY(-0.024em) rotate(1.6deg)}25%{transform:translateY(0.024em) rotate(2.4deg)}50%{transform:translateY(-0.040em) rotate(1.6deg)}75%{transform:translateY(0.032em) rotate(-1.6deg)}100%{transform:translateY(-0.024em) rotate(1.6deg)}}
.dt-jo:nth-of-type(8) { --dt-jig: dt-jig7; }
.dt-wordmark a:is(:hover, :focus-visible) .dt-jo { animation: var(--dt-jig) 2s steps(1, end) -0.5s infinite; }
/* Phones have no hover, so there the letters hop all the time (still off with reduced motion). */
@media (hover: none) {
	.dt-wordmark .dt-jo { animation: var(--dt-jig) 2s steps(1, end) -0.5s infinite; }
}
/* The wordmark is always ink: a tap counts as hover on phones, which turned the footer one purple. */
.dt-wordmark a:is(:hover, :focus-visible, :active) { color: var(--wp--preset--color--contrast); }
.dt-wordmark__small { font-size: 0.7rem; letter-spacing: 0.02em; padding-top: 0.2em; }
/* Wide screens: the header wordmark at 1.5x, so it holds its own on a big page. */
@media (min-width: 782px) {
	.dt-header .dt-wordmark__big { font-size: 1.875rem; }
	.dt-header .dt-wordmark__small { font-size: 1.05rem; }
}
/* Phone menu: the header's own (jostled) wordmark stays showing on top of the menu, so the
   two match exactly; the menu keeps an empty strip the same height for it to sit in. */
.has-modal-open .dt-wordmark { position: relative; z-index: 100001; }
.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: ""; border-bottom: 0; padding: 0;
	height: calc(1.25rem * 0.95 + 0.7rem * 1.15 + 2 * var(--wp--preset--spacing--20));
}
/* Links look like the page titles: headline font on the patterned highlighter, three
   patterns in turn; on tap/hover the pattern slides instead of the wavy underline. */
.is-menu-open .wp-block-navigation-item { border-bottom: 0; }
.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -0.03em; }
.is-menu-open .wp-block-navigation-item__label {
	background: url(assets/patterns/hl-waves-sun.svg);
	-webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.3em;
}
.is-menu-open .wp-block-navigation-item:nth-child(3n+2) .wp-block-navigation-item__label { background-image: url(assets/patterns/hl-grid-pink.svg); }
.is-menu-open .wp-block-navigation-item:nth-child(3n) .wp-block-navigation-item__label { background-image: url(assets/patterns/hl-waves-green.svg); }
.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, :active) { background: none; animation: none; }
.is-menu-open .wp-block-navigation-item__content:is(:hover, :focus-visible, :active) .wp-block-navigation-item__label { animation: dt-hl-run 3s linear infinite; }

/* Links: wavy underlines. On hover the colour stays put and the wave runs along under the
   words instead (a moving background, as a text underline can't move). The nav gets the
   moving wave on hover too. */
.dt-link, .dt-footer a, .dt-facts a, .dt-hero__artist a, .wp-block-post-excerpt a,
.wp-block-post-content a:not(.wp-element-button), .dt-newsletter__small a {
	text-decoration: underline wavy var(--wp--preset--color--pink);
	text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
:where(.dt-link, .dt-footer a:not(.dt-wordmark a), .dt-facts a, .dt-hero__artist a, .wp-block-post-excerpt a,
.wp-block-post-content a:not(.wp-element-button), .dt-newsletter__small a, .dt-links a, .dt-tabs a,
.wp-block-navigation-item__content) {
	/* Room under the words for the moving wave, there all the time and cancelled out by the
	   margin, so nothing jumps on hover (block links would otherwise grow and move).
	   :where() keeps this weaker than any link's own padding. */
	padding-bottom: 0.3em; margin-bottom: -0.3em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(.dt-link, .dt-footer a:not(.dt-wordmark a), .dt-facts a, .dt-hero__artist a, .wp-block-post-excerpt a,
.wp-block-post-content a:not(.wp-element-button), .dt-newsletter__small a, .dt-links a, .dt-tabs a,
.wp-block-navigation-item__content):is(:hover, :focus-visible) {
	color: var(--wp--preset--color--contrast); text-decoration-color: transparent;
	background: var(--dt-wave, url(assets/patterns/underline-pink.svg)) repeat-x 0 var(--dt-wave-y, 100%) / 12px 6px;
	animation: dt-wave-run 0.6s linear infinite;
}
/* These links already have room under the words (tap-sized padding): they keep their own
   spacing and the wave sits inside it, just under the text. */
.dt-tabs a { padding-bottom: 0.6rem; margin-bottom: -1px; --dt-wave-y: calc(100% - 0.25rem); }
.is-menu-open .wp-block-navigation-item__content { margin-bottom: 0; --dt-wave-y: calc(100% - 0.55rem); }
@media (max-width: 600px) {
	.dt-footer .wp-block-column a { padding-bottom: 0.55rem; margin-bottom: 0; --dt-wave-y: calc(100% - 0.2rem); }
}
@keyframes dt-wave-run { to { background-position-x: 12px; } }

/* Highlights: headings sit on a patterned highlighter. Three patterns, used in turn. */
.dt-hl-waves, .dt-section-title, .wp-block-post-title:is(h1), .dt-hero__title a,
.dt-release-grid .wp-block-post-title a, .dt-card__title {
	background: url(assets/patterns/hl-waves-sun.svg);
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	padding: 0 0.3em;
}
.dt-deco--rings .dt-section-title, .dt-tracklist .dt-section-title, .dt-release-grid li:nth-child(3n+2) .wp-block-post-title a,
.dt-news .wp-block-post-title a, .dt-artist-name {
	background: url(assets/patterns/hl-grid-pink.svg);
}
.dt-panel .dt-section-title, .dt-formats .dt-section-title, .dt-credits .dt-section-title,
.dt-release-grid li:nth-child(3n) .wp-block-post-title a {
	background: url(assets/patterns/hl-waves-green.svg);
}
/* Highlighted titles that are links: on hover (of the title, or of the whole card) the
   pattern slides along; the text stays ink. 168px is a whole number of every tile. */
.dt-hero__title a:is(:hover, :focus-visible), .dt-release-grid li:hover .wp-block-post-title a,
.dt-release-grid .wp-block-post-title a:focus-visible, .dt-news li:hover .wp-block-post-title a,
.dt-news .wp-block-post-title a:focus-visible, .dt-card a:is(:hover, :focus-visible) .dt-card__title {
	color: var(--wp--preset--color--contrast);
	animation: dt-hl-run 3s linear infinite;
}
@keyframes dt-hl-run { from { background-position: 0 0; } to { background-position: 168px 0; } }

.wp-site-blocks .dt-section-title, .dt-section-title {
	width: fit-content; margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--contrast); letter-spacing: -0.03em; line-height: 1.25; border: 0;
}
.wp-block-post-title:is(h1) { width: fit-content; line-height: 1.3; }

/* Small labels: italic serif, not mono. */
.dt-catno, .dt-eyebrow, .dt-facts dt, .dt-show-date { font-family: var(--wp--preset--font-family--sans); font-style: italic; font-size: var(--wp--preset--font-size--small); letter-spacing: 0; }
.dt-catno { text-transform: none; color: var(--wp--preset--color--accent); }

/* Buttons: fluoro pink, headline font. */
.dt-button, .dt-play, .wp-element-button, .wc-block-components-button:not(.is-link), .single_add_to_cart_button {
	background: var(--wp--preset--color--pink) !important; color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--display) !important; font-weight: 800; letter-spacing: -0.02em; text-transform: lowercase;
}
.dt-button:hover, .dt-play:hover, .wp-element-button:hover, .wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important;
}

/* Decorations: a pattern behind a section, half off the page. */
.dt-deco { position: relative; isolation: isolate; }
.dt-deco::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	background: no-repeat center / contain;
	width: min(26rem, 95vw); aspect-ratio: 600 / 520;
}
.dt-deco--spiral::before { background-image: url(assets/patterns/spiral-orange.svg); aspect-ratio: 1; width: min(22rem, 80vw); top: -4rem; right: -9rem; }
.dt-deco--grid::before { background-image: url(assets/patterns/grid-sun-purple.svg); top: 4rem; left: -8rem; }
.dt-deco--grid-teal::before { background-image: url(assets/patterns/grid-teal.svg); top: -2rem; right: -10rem; }
.dt-deco--rings::before { background-image: url(assets/patterns/rings-purple.svg); aspect-ratio: 1; top: 30%; left: -12rem; }
.dt-deco--rings-teal::before { background-image: url(assets/patterns/rings-teal.svg); aspect-ratio: 1; width: 20rem; top: -10rem; right: -11rem; }
/* A section with nothing in it yet is just a short line of text: the shape moves to the
   right so it doesn't sit on top of the words. */
.dt-deco:has(.dt-empty)::before { left: auto; right: -10rem; }
.dt-deco--fence::before { background-image: url(assets/patterns/fence-orange-pink.svg); top: 6rem; left: -10rem; width: min(22rem, 80vw); }
.dt-deco--fence-right::before { background-image: url(assets/patterns/fence-orange-pink.svg); top: 8rem; right: -10rem; width: min(22rem, 80vw); }

/* Full-width rippling line bands between sections. */
.dt-ripple {
	width: 100vw; margin: var(--wp--preset--spacing--40) 0 0 calc(50% - 50vw) !important; max-width: none !important;
	height: 7rem; background: repeat-x center / auto 100%;
}
.dt-ripple--pink { background-image: url(assets/patterns/ripple-pink.svg); }
.dt-ripple--green { background-image: url(assets/patterns/ripple-green.svg); background-position: 30% 50%; }
.dt-ripple--purple { background-image: url(assets/patterns/ripple-purple.svg); }
/* assets/motion.js swaps the static bands for moving ones (not for reduced motion). */
.dt-ripple { position: relative; }
.dt-ripple.is-live, .dt-footer.is-live::before { background-image: none !important; }
.dt-wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dt-footer__ripple { position: absolute; z-index: -1; inset: 0 0 auto; height: 7rem; margin-top: -3rem; pointer-events: none; }
/* It's a child of the footer's constrained layout, which would cap it at the wide size. */
.dt-footer > .dt-footer__ripple { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* EU import VAT banner (shipping page, basket, checkout): a frame of the pink grid highlight
   (as on the "news" heading) with a see-through middle. The frame is a layer behind the
   words with its centre masked out. */
.dt-notice.dt-eu {
	position: relative; isolation: isolate; border: 0; background: none;
	color: var(--wp--preset--color--contrast); padding: calc(0.75rem + 1rem) calc(0.75rem + 1.1rem); line-height: 1.5;
	margin-bottom: var(--wp--preset--spacing--30);
}
.dt-notice.dt-eu::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; padding: 0.75rem;
	background: url(assets/patterns/hl-grid-pink.svg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.dt-eu__lead { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -0.02em; font-size: 1.1em; margin-bottom: 0.2rem; }

/* Riso photos: each artist gets their ink pair (filters in functions.php). */
img[data-riso="0"] { filter: url(#dt-riso-0); }
img[data-riso="1"] { filter: url(#dt-riso-1); }
img[data-riso="2"] { filter: url(#dt-riso-2); }
img[data-riso="3"] { filter: url(#dt-riso-3); }
img[data-riso="4"] { filter: url(#dt-riso-4); }
img[data-riso="5"] { filter: url(#dt-riso-5); }

/* Home: latest release. Cover off to the left, text panel overlapping it. */
.dt-hero { display: block; position: relative; }
.dt-hero__art { display: block; width: 82%; margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem)); }
.dt-hero__text {
	position: relative; z-index: 1; width: 86%; margin: -4.5rem 0 0 auto;
	background: var(--wp--preset--color--base); padding: 1rem 1rem 0.5rem;
}
.dt-hero__title { font-size: var(--wp--preset--font-size--x-large); line-height: 1.35; margin: 0.25rem 0 0.5rem; }
.dt-hero__title a { text-decoration: none; }
.dt-hero__artist { font-style: italic; font-size: var(--wp--preset--font-size--large); }
.dt-eyebrow { color: var(--wp--preset--color--accent); }
@media (min-width: 800px) {
	.dt-hero { display: grid; grid-template-columns: 7fr 5fr; align-items: end; }
	.dt-hero__art { width: auto; margin-left: 0; }
	.dt-hero__text { width: auto; margin: 0 0 3rem -5rem; padding: 1.5rem; }
	.dt-hero__title { font-size: var(--wp--preset--font-size--huge); }
}

/* Catalogue: covers scattered rather than lined up. Each one stays inside its own grid cell
   (smaller, nudged down, pushed to one side), so covers never overlap covers and titles
   never overlap titles. */
.dt-scatter .wp-block-post-template { row-gap: 2.5rem; }
.dt-scatter .wp-block-post-template > li { position: relative; margin: 0 !important; }
.dt-scatter .wp-block-post-template > li:nth-child(2n) { margin-top: 3.5rem !important; }
.dt-scatter .wp-block-post-template > li:nth-child(3n+1) { width: 88% !important; }
.dt-scatter .wp-block-post-template > li:nth-child(4n+3) { width: 90% !important; justify-self: end; }
.dt-scatter .wp-block-post-template > li:nth-child(5n) { width: 94% !important; justify-self: center; }
/* Cat nos sit on paper, so the patterns behind the section don't swallow them. */
.dt-release-grid .dt-catno { width: fit-content; background: var(--wp--preset--color--base); padding: 0 0.3em; }
.dt-release-grid .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.95rem; line-height: 1.5; letter-spacing: -0.02em; }
.dt-release-grid .wp-block-post-title a { text-decoration: none; }
.dt-release-grid .dt-catno { margin: 0.3rem 0 0; }
@media (min-width: 800px) {
	.dt-scatter .wp-block-post-template { row-gap: 3rem; }
	.dt-scatter .wp-block-post-template > li { margin: 0 !important; width: auto !important; justify-self: stretch; }
	.dt-scatter .wp-block-post-template > li:nth-child(3n+2) { margin-top: 5rem !important; }
	.dt-scatter .wp-block-post-template > li:nth-child(3n) { margin-top: 2rem !important; width: 85% !important; justify-self: end; }
	.dt-scatter .wp-block-post-template > li:nth-child(4n) { width: 88% !important; justify-self: center; }
}

/* News */
.dt-news .wp-block-post-title { font-size: var(--wp--preset--font-size--large); line-height: 1.5; }
.dt-news .wp-block-post-title a { text-decoration: none; }
.dt-news .wp-block-post-featured-image { width: 80%; }
.dt-news li:nth-child(2n) .wp-block-post-featured-image { margin-left: auto; }

/* Coloured panel (newsletter) */
.dt-panel { background: #FFE9B3; padding: var(--wp--preset--spacing--30); overflow: hidden; margin-top: var(--wp--preset--spacing--40); }
.dt-panel .dt-section-title { margin-top: 0; }
.dt-newsletter input[type=email] { border: 0; border-bottom: 3px solid var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); }

/* Release page: giant cat no cropped off the edge, title, cover overlapping it. */
.dt-release-hero { display: flex; flex-direction: column; }
.dt-bigcat {
	order: 3; position: relative; z-index: 1; margin: -0.45em 0 0 -0.06em !important;
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(6rem, 42vw, 15rem);
	line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap;
	background: url(assets/patterns/hl-waves-green.svg) 0 0 / 36px auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Phones: just the number, bigger. */
@media (max-width: 799px) { .dt-bigcat__letters { display: none; } }
.dt-release-hero .wp-block-post-title { order: 1; font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1rem; }
.dt-release-cover { order: 2; }
.dt-release-cover { width: 78% !important; margin-left: auto; }
.dt-release-body { max-width: 40rem; }
.dt-release-body .dt-facts { margin-left: 1rem; }
.dt-formats {
	position: relative; margin: var(--wp--preset--spacing--30) 0 0 2rem;
	background: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--contrast); padding: 0 1rem 0.5rem;
}
.dt-formats .dt-section-title { margin-top: 1rem; font-size: var(--wp--preset--font-size--large); }
.dt-formats li a { border-bottom: 0; padding: 0.7rem 0.8rem; margin-bottom: 0.4rem; border: 2px solid var(--wp--preset--color--contrast); }
/* Every row the same; each ends in "buy", and fills pink on hover/tap. */
.dt-format-buy { margin-left: 1rem; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.85rem; text-transform: lowercase; }
.dt-formats li a:hover { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--contrast); }
.dt-player { margin-left: 2rem; }
.dt-tracklist ol { background: var(--wp--preset--color--base); width: fit-content; padding-right: 1rem; }
.dt-tracklist li::marker { font-family: var(--wp--preset--font-family--sans); font-style: italic; color: var(--wp--preset--color--accent); }
.dt-credits { border: 2px solid var(--wp--preset--color--contrast); padding: 0 1rem; margin-top: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base); }
.dt-credits .dt-section-title { font-size: var(--wp--preset--font-size--large); }
@media (min-width: 800px) {
	.dt-release-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
	.dt-release-hero .wp-block-post-title { font-size: var(--wp--preset--font-size--huge); grid-column: 1; grid-row: 1; margin-top: 3rem; }
	.dt-release-cover { grid-column: 2; grid-row: 1 / span 2; width: 100% !important; }
	.dt-bigcat { grid-column: 1 / -1; grid-row: 3; margin-top: -0.6em !important; }
	.dt-release-body { margin-left: 8%; }
}

/* Artist page: inked photo off to the right, name highlighted over its corner. */
.dt-artist-hero { display: flex; flex-direction: column; }
.dt-artist-photo { width: 86% !important; margin-left: auto; margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)); }
.dt-artist-name {
	position: relative; z-index: 1; align-self: flex-start; width: fit-content; margin: -2.4em 0 0 !important;
	font-size: var(--wp--preset--font-size--huge); line-height: 1.35; padding: 0 0.3em;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dt-artist-body { margin-top: var(--wp--preset--spacing--40); }
@media (min-width: 800px) {
	.dt-artist-photo { width: 60% !important; margin-right: 0; }
	.dt-artist-name { margin: -3em 0 0 8% !important; }
}

/* Service links and shows */
.dt-links a { text-decoration: underline wavy var(--wp--preset--color--green); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.dt-links a { --dt-wave: url(assets/patterns/underline-green.svg); }
.dt-links li:nth-child(2) a { text-decoration-color: var(--wp--preset--color--pink); --dt-wave: url(assets/patterns/underline-pink.svg); }
.dt-links li:nth-child(3) a { text-decoration-color: var(--wp--preset--color--sunflower); --dt-wave: url(assets/patterns/underline-sunflower.svg); }
.dt-shows li { border-bottom: 2px solid var(--wp--preset--color--contrast); }

/* Release cards (artist page) */
.dt-card:nth-child(2n) { margin-top: 2.5rem; }
.dt-card__title { width: fit-content; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.95rem; line-height: 1.5; }

/* Shop: options, tabs and chips in ink. */
.dt-option { border: 2px solid var(--wp--preset--color--contrast); }
.dt-option[aria-checked="true"] { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); box-shadow: none; }
.dt-option[aria-checked="true"] .dt-option__price { color: inherit; }
.dt-tabs { border-bottom: 0; }
.dt-tabs a[aria-current="page"] { border-bottom: 0; text-decoration: underline wavy var(--wp--preset--color--pink); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.dt-chips a { border: 2px solid var(--wp--preset--color--contrast); border-radius: 0; color: var(--wp--preset--color--contrast); }
.dt-chips a[aria-current="page"] { background: var(--wp--preset--color--contrast); }
.wc-block-components-product-badge, .wc-block-components-product-sale-badge { background: var(--wp--preset--color--sunflower); color: var(--wp--preset--color--contrast); border: 0; }

/* Footer */
.dt-footer { border-top: 0; color: var(--wp--preset--color--contrast); position: relative; isolation: isolate; }
.dt-footer::before {
	content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 7rem; margin-top: -3rem;
	background: url(assets/patterns/ripple-purple.svg) repeat-x center / auto 100%;
}
/* The ripple reaches 4rem into the footer (more while it moves): everything starts below it. */
.dt-footer { padding-top: 6rem !important; }
/* WooCommerce's own order-received template has no bottom padding; the footer's ripple
   (pulled up 3rem) would sit on the address boxes. */
.woocommerce-order-received .wp-site-blocks > main { padding-bottom: var(--wp--preset--spacing--50); }
.dt-footer .dt-wordmark { margin-top: 0; }
.dt-footer .dt-wordmark__big { font-size: 1.6rem; }
.dt-footer .wp-block-column .dt-wordmark a { display: inline-flex; flex-direction: column; padding: 0; text-decoration: none; }
/* Wide screens: the link columns sit close to the wordmark with room between the lines,
   rather than spread across the whole page. */
@media (min-width: 782px) {
	.dt-footer .wp-block-columns { display: grid !important; grid-template-columns: minmax(24rem, 1.6fr) 1fr 1fr 2fr; column-gap: 3rem; }
	.dt-footer .wp-block-column:not(:first-child) p { line-height: 2.1; }
}
/* In-between widths (601-781px) use the phone layout: two roomy columns. */
@media (min-width: 601px) and (max-width: 781px) {
	.dt-footer .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30); }
	.dt-footer .wp-block-column:first-child { grid-column: 1 / -1; }
	.dt-footer .wp-block-column a { display: inline-block; padding: 0.55rem 0; margin-bottom: 0; --dt-wave-y: calc(100% - 0.2rem); }
	.dt-footer .wp-block-column p { line-height: 1.2; }
}
.dt-footer__legal { margin-top: 2.5rem !important; font-style: italic; font-size: 0.85rem; color: var(--wp--preset--color--muted); }

/* Archive, shop and section page headings: centred on a highlighter, like the shop's. */
.wp-block-query-title, .dt-page-title {
	width: fit-content; padding: 0 0.3em; line-height: 1.3;
	background: url(assets/patterns/hl-grid-pink.svg); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.dt-page-title { margin-bottom: var(--wp--preset--spacing--40) !important; font-size: var(--wp--preset--font-size--huge); }
/* Page titles line up with the left edge of the text under them (fit-content would
   otherwise sit them in the middle of the column). */
:is(.wp-block-post-title:is(h1), .dt-page-title, .wp-block-query-title):not(.dt-release-hero *) {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important; margin-right: auto !important;
}
:is(.dt-page-title, .wp-block-query-title).alignwide:not(.dt-release-hero *) {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important;
}
.post-type-archive-dt_release .dt-page-title { background-image: url(assets/patterns/hl-waves-sun.svg); }
.post-type-archive-dt_show .dt-page-title { background-image: url(assets/patterns/hl-waves-green.svg); }
/* Home intro: one big line saying what the label is, above everything else. */
.dt-intro { font-family: var(--wp--preset--font-family--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
	font-size: clamp(1.75rem, 5vw, 3rem); max-width: 20em; margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--20) !important;
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important; } /* lines up with the wide column on big screens */
.dt-intro + p { margin-top: 0; }
/* Home: the catalogue and shows sections stay hidden until there's something in them. */
:is(.dt-home-catalogue, .dt-home-shows):has(.dt-empty) { display: none; }
/* Text pages (about, contact, faq…): the reading column starts at the wide column's left
   edge like the rest of the site, instead of sitting in the middle on big screens. */
body.page:not(.home) main > .wp-block-post-title,
body.page:not(.home) main > .entry-content {
	margin-left: max(0px, (100% - var(--wp--style--global--wide-size)) / 2) !important; margin-right: auto !important;
}

/* Empty pages (no releases, artists or news yet): a pattern half off the page and the
   newsletter sign-up, so the page isn't just blank paper. */
.dt-empty-state { position: relative; isolation: isolate; min-height: 24rem; padding-bottom: var(--wp--preset--spacing--40); }
.dt-empty-state::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	background: url(assets/patterns/spiral-green.svg) no-repeat center / contain;
	aspect-ratio: 1; width: min(24rem, 75vw); bottom: -4rem; right: -8rem;
}
.dt-empty-state .dt-newsletter { max-width: 32rem; margin-top: var(--wp--preset--spacing--30); }

/* Product grid buttons: smaller than the main "pre-order" one. */
.wc-block-components-product-button .wp-element-button { font-size: 0.85rem !important; padding: 0.6em 1em !important; min-height: 0; }

/* Less motion asked for: hovers still show the wave and pattern, just standing still. */
@media (prefers-reduced-motion: reduce) {
	.dt-wordmark .dt-jo, .dt-soon__title .dt-jo, .wp-block-navigation-item__label, :hover, :focus-visible, :hover * { animation: none !important; }
}

/* Keyboard focus: a square ink ring with a gap, like the buttons' sharp corners.
   Only for keyboard use (focus-visible), never on tap or click. */
:focus-visible { outline: 3px solid var(--wp--preset--color--contrast); outline-offset: 3px; border-radius: 0; }

/* Menu: the section you're in keeps a still wavy underline (hover makes it run). */
.wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline wavy var(--wp--preset--color--pink); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.is-menu-open .wp-block-navigation-item__content[aria-current="page"] { text-decoration: none; }
.is-menu-open .wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label { animation: dt-hl-run 6s linear infinite; }

/* 404: a huge jostled number filled with a riso pattern. */
.dt-404 {
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(6rem, 28vw, 18rem);
	line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; margin: 0 0 var(--wp--preset--spacing--30);
}
.dt-404 .dt-jo {
	background: url(assets/patterns/hl-waves-sun.svg) 0 0 / 48px auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dt-404__text { font-size: var(--wp--preset--font-size--large); }

/* Coming soon (WooCommerce → Settings → Site visibility): the whole site is this one page.
   Wordmark, a huge jostled "soon", one line, the sign-up, then a ripple off the bottom. */
.dt-soon {
	min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; overflow-x: clip;
	padding: var(--wp--preset--spacing--30) var(--wp--style--root--padding-right, 1rem) 0 var(--wp--style--root--padding-left, 1rem);
}
.dt-soon > * { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
/* Not a link here, so it needs the stack the header gets from .dt-wordmark a: "records" under the name. */
.dt-soon__wordmark { display: inline-flex; flex-direction: column; }
.dt-soon__wordmark .dt-wordmark__big { font-size: 1.875rem; }
.dt-soon__wordmark .dt-wordmark__small { font-size: 1.05rem; }
.dt-soon__title { margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20); }
/* "soon" never sits still: the letters hop like the wordmark's, and the waves inside them run. */
.dt-soon__title .dt-jo {
	animation: var(--dt-jig) 2s steps(1, end) -0.5s infinite, dt-soon-waves 2.4s linear infinite;
}
@keyframes dt-soon-waves { from { background-position: 0 0; } to { background-position: 48px 0; } }
.dt-soon__text { max-width: 34rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.dt-soon__panel { width: 100%; max-width: 40rem; }
.dt-soon__links { margin-top: var(--wp--preset--spacing--40); }
.dt-soon__ripple { margin-top: auto !important; margin-left: calc(-1 * var(--wp--style--root--padding-left, 1rem)) !important; }

/* Newsletter: once signed up, the form goes and this line takes its place. */
.dt-newsletter-done {
	width: fit-content; padding: 0 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
	background: url(assets/patterns/hl-waves-green.svg);
	font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em; line-height: 1.5;
}

/* My account (log in): same square fields and lowercase labels as the rest of the site. */
.woocommerce-account .woocommerce-form-login { border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: 28rem; }
.woocommerce-account .woocommerce-form-login label, .woocommerce-account .lost_password a { text-transform: lowercase; }
.woocommerce-account .woocommerce-form-login .input-text {
	border: 0 !important; border-bottom: 3px solid var(--wp--preset--color--contrast) !important; border-radius: 0 !important;
	background: #fff; padding: 0.7rem 0.8rem; font: inherit;
}
.woocommerce-account .woocommerce-form-login .required { color: inherit; text-decoration: none; }
.woocommerce-account .lost_password a { text-decoration: underline wavy var(--wp--preset--color--pink); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* Shop and category pages lost their breadcrumb: the title gets that space back, so it
   sits at the same height as the other page titles. */
:is(.woocommerce-shop, .tax-product_cat) .wp-block-query-title { margin-top: 2.6rem !important; }

/* Home with a release out: the intro steps back so the cover is on the first screen. */
main:has(.dt-hero) .dt-intro { font-size: clamp(1.15rem, 2.6vw, 1.6rem); max-width: 28em; }

/* Home catalogue: the grid blob peeks out from the right edge between the cards,
   rather than sitting under the first one. */
.dt-deco--grid:has(.dt-release-grid li)::before { left: auto; right: calc(-0.55 * min(24rem, 70vw)); top: 35%; width: min(24rem, 70vw); }

/* Artist page: the rings peek out from behind the photo's top corner, away from the bio. */
.dt-artist-hero.dt-deco--rings::before { top: -3rem; left: 2%; width: min(16rem, 55vw); }
@media (min-width: 800px) { .dt-artist-hero.dt-deco--rings::before { left: calc(40% - 11rem); } }

/* Shop grid titles on the highlighters too, like the catalogue (three patterns in turn,
   sliding on hover). */
.wp-block-woocommerce-product-collection .wp-block-post-title a {
	background: url(assets/patterns/hl-waves-sun.svg); -webkit-box-decoration-break: clone; box-decoration-break: clone;
	padding: 0 0.3em; text-decoration: none; line-height: 1.5;
}
.wp-block-woocommerce-product-collection li:nth-child(3n+2) .wp-block-post-title a { background-image: url(assets/patterns/hl-grid-pink.svg); }
.wp-block-woocommerce-product-collection li:nth-child(3n) .wp-block-post-title a { background-image: url(assets/patterns/hl-waves-green.svg); }
.wp-block-woocommerce-product-collection li:hover .wp-block-post-title a,
.wp-block-woocommerce-product-collection .wp-block-post-title a:focus-visible { color: var(--wp--preset--color--contrast); animation: dt-hl-run 3s linear infinite; }

/* Shop notices ("added to your basket", errors): square ink box on paper, no tick. */
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info {
	background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important;
	border: 2px solid var(--wp--preset--color--contrast) !important; border-radius: 0 !important; box-shadow: none !important;
	font-size: var(--wp--preset--font-size--medium);
}
.wc-block-components-notice-banner.is-error, .woocommerce-error { border-color: var(--wp--preset--color--pink) !important; }
.wc-block-components-notice-banner > svg, .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { display: none !important; }
.wc-block-components-notice-banner a.dt-link { white-space: nowrap; }
/* WooCommerce moves focus to the notice so screen readers announce it; no ring needed. */
.wc-block-components-notice-banner:focus { outline: none; }

/* Basket drawer: just "your basket" (the count's on the icon), and "view basket" as the
   quieter outline button so checkout is clearly the next step. */
.wc-block-mini-cart__title :is(.wc-block-mini-cart__title-items-counter-block, .wp-block-woocommerce-mini-cart-title-items-counter-block) { display: none; }
.wc-block-mini-cart__footer-cart.wp-element-button {
	background: transparent !important; border: 2px solid var(--wp--preset--color--contrast) !important;
}
.wc-block-mini-cart__footer-cart.wp-element-button:hover { background: var(--wp--preset--color--contrast) !important; color: var(--wp--preset--color--base) !important; }
.wp-block-woocommerce-empty-mini-cart-contents-block { text-align: left; padding: var(--wp--preset--spacing--30); }

/* Checkout in the site's lowercase (field labels, headings, helper lines). The terms
   line keeps its own capitals; the "checking out as a guest" note is noise. */
:is(.wc-block-checkout, .wc-block-cart, .wc-block-mini-cart__drawer) :is(label, .wc-block-components-checkout-order-summary__title-text, .wc-block-components-product-details, .wc-block-components-title, .wc-block-components-checkout-step__title,
.wc-block-components-address-form__address_2-toggle, .wc-block-components-order-summary__button-text,
.wc-block-components-totals-item__label, .wc-block-components-checkbox__label):not(.wc-block-checkout__terms *) { text-transform: lowercase; }
.wc-block-checkout__guest-checkout-notice { display: none; }

/* Order received: item names lowercase like the rest of the shop, and WooCommerce's
   create-account small print too (it's written in its script, so wording.php can't reach it). */
.woocommerce-order-received .wc-block-order-confirmation-totals :is(td:first-child, th),
.wc-block-order-confirmation-downloads :is(td, th),
.wc-block-order-confirmation-create-account-description { text-transform: lowercase; }

/* Cancel an order: "change details" is the quiet second choice next to "confirm cancellation". */
.woocommerce-order-withdrawal-content__actions button[value="edit"] {
	background: transparent !important; color: var(--wp--preset--color--contrast) !important;
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--contrast);
}

/* Order received: WooCommerce prints its own plain <h1>; give it the page-title highlighter
   like every other page (basket, my account, shop…). */
.wc-block-order-confirmation-status h1 {
	width: fit-content; padding: 0 0.3em; line-height: 1.3; margin: 0 0 var(--wp--preset--spacing--20);
	background: url(assets/patterns/hl-waves-sun.svg); -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Download tables: the item, then a button (wording.php swaps the repeated name for "download"). */
.dt-download { padding: 0.45em 1em; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 0.85rem; white-space: nowrap; }