:root{
/* Frost — the signature background: a soft glow, blurred past recognition, then grained over.
   Rule: the glow is always OFF-CENTRE and always behind the frost, never on top of it. */
--frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");/* @kind other */
--frost-grain-size:240px;
/* Grain weight — 3 steps. Default is 2. */
--frost-grain-1:.14;/* @kind other */
--frost-grain-2:.26;/* @kind other */
--frost-grain-3:.38;/* @kind other */
/* Blur depth — how far past recognition the glow is pushed */
--frost-blur-1:40px;--frost-blur-2:90px;--frost-blur-3:160px;
/* Glow bloom colours — palette only, no new hues */
--frost-bloom-cool:#5C82BE;--frost-bloom-deep:var(--ink-6);--frost-bloom-pale:#DCE4EE;--frost-bloom-accent:var(--chart-2);
/* Base fields */
--frost-field-ink:var(--ink-5);--frost-field-paper:var(--paper-2);
}
/* --- Frost field ---------------------------------------------------------
   .frost                 ink field, grain 2, blur 2
   .frost--paper          paper field
   .frost--grain-1/-3     lighter / heavier grain
   .frost--blur-1/-3      tighter / softer bloom
   Content goes in a child; the glow and grain are pseudo-elements. */
.frost{position:relative;isolation:isolate;overflow:hidden;background:var(--frost-field-ink);color:var(--text-on-ink)}
.frost::before{content:"";position:absolute;inset:-25%;z-index:-2;filter:blur(var(--frost-blur-2)) saturate(1.15);background:
radial-gradient(46% 52% at 60% 26%,var(--frost-bloom-pale) 0%,transparent 62%),
radial-gradient(64% 70% at 20% 58%,var(--frost-bloom-cool) 0%,transparent 66%),
radial-gradient(58% 62% at 84% 88%,var(--frost-bloom-deep) 0%,transparent 64%)}
.frost::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--frost-grain);background-size:var(--frost-grain-size);opacity:var(--frost-grain-2);mix-blend-mode:overlay}
.frost--paper{background:var(--frost-field-paper);color:var(--text-body)}
.frost--paper::before{background:
radial-gradient(40% 46% at 68% 24%,#FFFFFF 0%,transparent 70%),
radial-gradient(54% 60% at 20% 66%,var(--frost-bloom-accent) 0%,transparent 72%),
radial-gradient(46% 52% at 82% 86%,var(--paper-4) 0%,transparent 74%)}
.frost--paper::after{mix-blend-mode:multiply}
.frost--grain-1::after{opacity:var(--frost-grain-1)}
.frost--grain-3::after{opacity:var(--frost-grain-3)}
.frost--blur-1::before{filter:blur(var(--frost-blur-1)) saturate(1.15)}
.frost--blur-3::before{filter:blur(var(--frost-blur-3)) saturate(1.15)}
/* Photo frost — put an <img class="frost__photo"> as the first child.
   The photo replaces the gradient bloom; it must be blurred past recognition. */
.frost__photo{position:absolute;inset:-15%;z-index:-2;width:130%;height:130%;object-fit:cover;filter:blur(var(--frost-blur-2)) saturate(1.1)}
/* Cool grade — for warm-source portraits (plaster, cream, terracotta grounds).
   Desaturates the source and lets the ink field tint it back into the palette. */
.frost__photo--cool{filter:blur(var(--frost-blur-2)) saturate(.85) contrast(1.02)}
.frost:has(.frost__photo--cool)::after{opacity:var(--frost-grain-3)}
/* Legibility scrim + cool grade in one layer. Normal blend, so it also guarantees
   a dark zone at top and bottom — the eyebrow and byline slots — whatever the photo does. */
.frost__tint{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(10,20,36,.74) 0%,rgba(19,30,50,.30) 40%,rgba(19,30,50,.34) 62%,rgba(10,20,36,.70) 100%),linear-gradient(200deg,rgba(92,130,190,.34),rgba(10,20,36,.34))}
.frost:has(.frost__photo)::before{display:none}