/* ---------------------------------------------------------------------------
   Patterns: style and colour behind the feature areas, so the site is not one flat blend.
   An area is any element with data-pt-area="name" (js/patterns.js puts a .pt-layer inside it and chooses the
   pattern and palette from admin-centre/appearance.html). Looks drawn in Magu's own colours, inspired by open
   Uiverse (MIT) patterns: rings, halftone, grain and sunrise.
   --------------------------------------------------------------------------- */
[data-pt-area] { position: relative; isolation: isolate; }
.pt-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pt-layer[data-pt="none"], .pt-layer[data-pt="aurora"] { display: none; }

/* palettes: a strong colour, a second colour, and a soft wash */
.pt-layer { --pt-a: #ff7a00; --pt-b: #ffae5c; --pt-s: #fff4ec; --pt-o: 0.5; }
.pt-layer[data-pc="violet"] { --pt-a: #3a3a40; --pt-b: #a1a1a8; --pt-s: #f4f4f5; }
.pt-layer[data-pc="teal"]   { --pt-a: #6b6b73; --pt-b: #c9c9cf; --pt-s: #f6f6f7; }
.pt-layer[data-pc="sunrise"]{ --pt-a: #ff9330; --pt-b: #ffc27a; --pt-s: #fff1e6; }
.pt-layer[data-pc="ink"]    { --pt-a: #111111; --pt-b: #6b6b73; --pt-s: #f1f1f2; }
/* on a dark surface the pattern is light and quiet */
[data-pt-tone="dark"] > .pt-layer { --pt-a: rgba(255, 255, 255, 0.55); --pt-b: rgba(255, 150, 40, 0.7); --pt-s: transparent; --pt-o: 0.22; }

.pt-layer { opacity: var(--pt-o); }
/* rings: repeating soft rings */
.pt-layer[data-pt="rings"] { background: repeating-radial-gradient(circle at 0 0, var(--pt-s) 87%, var(--pt-a) 90%) 0 0 / 52px 52px; -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 85%); mask-image: linear-gradient(160deg, #000 10%, transparent 85%); }
/* halftone: dots that fade away */
.pt-layer[data-pt="halftone"] { background: radial-gradient(circle, var(--pt-a) 0 32%, transparent 36%) 0 0 / 15px 15px; -webkit-mask-image: linear-gradient(200deg, #000, rgba(0, 0, 0, 0.12) 80%); mask-image: linear-gradient(200deg, #000, rgba(0, 0, 0, 0.12) 80%); }
/* grain: a soft gradient with fine film grain */
.pt-layer[data-pt="grain"] { --pt-o: 0.42; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .55  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(135deg, var(--pt-a), var(--pt-b)); background-blend-mode: soft-light, normal; }
[data-pt-tone="dark"] > .pt-layer[data-pt="grain"] { --pt-o: 0.5; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(135deg, rgba(255, 150, 40, 0.35), rgba(255, 255, 255, 0.04)); background-blend-mode: normal, normal; }
/* sunrise: a glowing ellipse */
.pt-layer[data-pt="sunrise"] { --pt-o: 0.4; background: radial-gradient(ellipse at 70% 0%, var(--pt-a), transparent 55%, var(--pt-b)); }
[data-pt-tone="dark"] > .pt-layer[data-pt="sunrise"] { --pt-o: 0.5; background: radial-gradient(ellipse at 70% 0%, var(--pt-b), transparent 60%); }
/* grid and dots */
.pt-layer[data-pt="grid"] { background: linear-gradient(var(--pt-a) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, var(--pt-a) 1px, transparent 1px) 0 0 / 44px 44px; --pt-o: 0.12; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); }
.pt-layer[data-pt="dots"] { background: radial-gradient(var(--pt-a) 1.4px, transparent 1.6px) 0 0 / 24px 24px; --pt-o: 0.3; -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse at 30% 40%, #000, transparent 75%); }

/* places that carry a pattern need room for it */
.hm-top[data-pt-area] { padding: clamp(18px, 3vw, 30px); border-radius: 22px; overflow: hidden; }
.hf-art[data-pt-area] { isolation: isolate; }
.hf-art[data-pt-area]::before { display: none; }
.hb-band[data-pt-area], .hb-offer[data-pt-area] { isolation: isolate; }
.auth-brand[data-pt-area] { isolation: isolate; }
.pt-demo { position: relative; isolation: isolate; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.pt-layer[data-pt="halftone"] { --pt-o: 0.38; }
[data-pt-tone="dark"] > .pt-layer[data-pt="rings"] { --pt-o: 0.4; }

.hm2-top[data-pt-area] { padding: clamp(24px, 4vw, 44px); border-radius: 28px; overflow: hidden; }

.jr-head[data-pt-area] { isolation: isolate; }
.jr-head > .pt-layer[data-pt] { --pt-o: 0.26; }


/* signed-in home: the pattern fills the whole top of the page (no box) and fades into the normal background as you go down */
.hm2 { position: relative; isolation: isolate; }
.hm2-top[data-pt-area] { position: static; isolation: auto; padding: 0; border-radius: 0; overflow: visible; }
.hm2-top[data-pt-area]::before { display: none; }
.hm2 .hm2-top > .pt-layer { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: min(620px, 80vh); border-radius: 0; --pt-o: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.85) 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.85) 35%, transparent 100%); }

/* more patterns, drawn in Magu's colours (inspired by the Uiverse pattern gallery) */
.pt-layer[data-pt="checker"] { background: conic-gradient(var(--pt-a) 25%, var(--pt-b) 0 50%, var(--pt-a) 0 75%, var(--pt-b) 0) 0 0 / 64px 64px; }
.pt-layer[data-pt="stripes"] { background: repeating-linear-gradient(45deg, var(--pt-a) 0 20px, var(--pt-b) 20px 40px); }
.pt-layer[data-pt="zigzag"] { background: linear-gradient(135deg, var(--pt-a) 25%, transparent 25%) -22px 0 / 44px 44px, linear-gradient(225deg, var(--pt-a) 25%, transparent 25%) -22px 0 / 44px 44px, linear-gradient(315deg, var(--pt-a) 25%, transparent 25%) 0 0 / 44px 44px, linear-gradient(45deg, var(--pt-a) 25%, transparent 25%) 0 0 / 44px 44px; background-color: var(--pt-b); }
.pt-layer[data-pt="scallop"] { background: radial-gradient(circle at 0 50%, var(--pt-a) 0 30%, transparent 31%) 0 0 / 64px 64px, radial-gradient(circle at 100% 50%, var(--pt-a) 0 30%, transparent 31%) 0 0 / 64px 64px, radial-gradient(circle at 50% 0, var(--pt-b) 0 22%, transparent 23%) 0 0 / 64px 64px; background-color: var(--pt-s); }
.pt-layer[data-pt="diamonds"] { background: linear-gradient(135deg, var(--pt-a) 25%, transparent 25%) -32px 0 / 64px 64px, linear-gradient(225deg, var(--pt-a) 25%, transparent 25%) -32px 0 / 64px 64px, linear-gradient(315deg, var(--pt-b) 25%, transparent 25%) 0 0 / 64px 64px, linear-gradient(45deg, var(--pt-b) 25%, transparent 25%) 0 0 / 64px 64px; background-color: var(--pt-s); }
.pt-layer[data-pt="waves"] { background: radial-gradient(circle at 50% 100%, transparent 36%, var(--pt-a) 37% 40%, transparent 41%) 0 0 / 56px 28px, radial-gradient(circle at 50% 0, transparent 36%, var(--pt-b) 37% 40%, transparent 41%) 28px 14px / 56px 28px; }
.pt-layer[data-pt="checker"], .pt-layer[data-pt="stripes"], .pt-layer[data-pt="zigzag"], .pt-layer[data-pt="scallop"], .pt-layer[data-pt="diamonds"] { --pt-o: 0.4; }
.pt-layer[data-pt="waves"] { --pt-o: 0.5; }

/* a photo behind an opening: a flat dark veil keeps the words readable */
.bg-photo { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: center; pointer-events: none; }
.bg-photo::after { content: ""; position: absolute; inset: 0; background: rgba(17, 17, 17, 0.58); }
.has-bg .page-title, .has-bg .page-lede, .has-bg h1, .has-bg p, .has-bg .eyebrow, .has-bg .hm2-date { color: #fff !important; }
.has-bg .page-title em, .has-bg h1 em { color: #ffa042 !important; }
.has-bg .pt-layer { display: none; }
.bg-credit { position: absolute; right: 14px; bottom: 10px; z-index: 2; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); }
.bg-credit:hover { color: #fff; }