/* dzidzi base: type, the frame and the line. Colours and modes are in looks.css; components in components.css.
   Three shapes only. The cell: square corners, framed by the line; things you read and things you press.
   The pill: small controls that change a setting. The dot: marks, counts and the light.
   Nothing has a drop shadow. Only the ink anchors and the main button are filled. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  /* type. One swap point: a different heading typeface goes first in --font-display. */
  --font-display: 'Schibsted Grotesk', 'Schibsted fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Schibsted fallback', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* the frame. --cell is the hero grid's unit; space on the page is counted in cells. */
  --content: 1200px; --gutter: 16px; --nav-h: 64px;
  --cell: 40px;
  --pad: clamp(20px, 3.2vw, 40px);
  --ease-ui: cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* the line, as a colour. --hair-strong is what it becomes under the pointer. */
  --hair: color-mix(in srgb, var(--line) calc(var(--line-a) * 100%), transparent);
  --hair-strong: color-mix(in srgb, var(--fg) 78%, transparent);
  /* the grid's own lines are fainter than the frame, as in the hero */
  --grid: color-mix(in srgb, var(--line) calc(var(--line-a) * 58%), transparent);
  /* the one large step: between a section's content and the line that begins or ends it */
  --sec: clamp(56px, 7.4vw, 104px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
/* ---- big screens: the page grows a little. On a wide monitor the 1200 px column would sit small in the middle,
   so from 1800 px the whole page is zoomed, text, grid and rings together, as if the browser were zoomed in.
   Only where the browser reports zoom in the standard way (the head script adds .zoomable): the scripts convert
   on-screen positions with zoomOf() in vendor/motion.js. Viewport units grow with the zoom, so a height made of
   them divides by --z. */
@media (min-width: 1800px) { :root.zoomable { --z: 1.1; zoom: var(--z); } }
@media (min-width: 2200px) { :root.zoomable { --z: 1.2; } }
@media (min-width: 2800px) { :root.zoomable { --z: 1.35; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55; font-weight: 400;
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  transition: background-color .5s var(--ease-ui), color .5s var(--ease-ui);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
[hidden] { display: none !important; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--btn-ink); }
.reduce *, .reduce *::before, .reduce *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
/* While the page is first painted nothing transitions. Safari otherwise animates the first styles in: the phone
   menu shows and fades, the outlined lines start solid, the colours fade up. The head script sets .preload and
   site.js lifts it two frames after the page has loaded. The soft rise keeps its own transition. */
.preload *, .preload *::before, .preload *::after { transition: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- type */
.d1, .h2, .h3 { font-family: var(--font-display); text-wrap: balance; }
.d1 { font-weight: 700; font-size: clamp(40px, 5.6vw, 80px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-weight: 700; font-size: clamp(30px, 3.5vw, 50px); line-height: 1.04; letter-spacing: -.028em; }
.h3 { font-weight: 600; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.18; letter-spacing: -.015em; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.45; color: var(--muted); text-wrap: pretty; max-width: 46ch; }
.body { max-width: 62ch; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.5; }
.muted, .soft { color: var(--muted); }
/* two-tone lead: a dark claim, then a second line in the same line of thought, drawn as an outline (components.css) */
/* labels: wide, monospaced, small. The logo is wide; so are the labels. Headlines are tight. */
.label { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--label); text-wrap: balance; }
/* running text never ends a paragraph or a list item with one short word alone on its last line */
p, li { text-wrap: pretty; }
.link { text-decoration: underline; text-decoration-color: var(--hair); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color .2s var(--ease-ui); }
.link:hover { text-decoration-color: currentColor; }

/* ---- the frame: two rails run the height of every section; content sits between them */
.rails { position: relative; }
.rails::before, .rails::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 2;
  left: max(var(--gutter), calc(50% - var(--content) / 2));
  background: var(--rail-img, var(--hair)) repeat-y; background-size: 1px 1024px;
}
.rails::after { left: auto; right: max(var(--gutter), calc(50% - var(--content) / 2)); }
.shell { width: min(var(--content), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.inset { padding-inline: var(--pad); }
/* the one rule between sections: it ends where the grid ends, at the rails. With the divider script it ripples. */
.rule { height: 1px; background: var(--hair); }
/* the rule itself is 1 px in the layout; its canvas is 21 px tall and laid over it, so the line has room to move */
.rule.divider { height: 1px; background: none; position: relative; z-index: 1; --divider-color: var(--hair); }
.rule.divider .divider-canvas { position: absolute; left: 0; top: -10px; width: 100%; height: 21px; }
html:not(.js) .rule.divider { background: var(--hair); }

/* ---- an ink anchor: always dark, whatever the page mode; it keeps the mode's accents */
.anchor {
  --bg: var(--ink); --fg: var(--paper); --muted: rgba(244, 241, 234, .78);
  --soft: color-mix(in srgb, var(--paper) 62%, var(--ink));
  --line: #F1E6CF; --line-a: .34; --dot: var(--paper);
  --spark: var(--accent);
  --light-mode: 1; --label: rgba(244, 241, 234, .72); --focus: #B8D2FF; --danger: #FF9D87;
  --hair: color-mix(in srgb, var(--line) calc(var(--line-a) * 100%), transparent);
  --hair-strong: color-mix(in srgb, var(--fg) 78%, transparent);
  background: var(--bg); color: var(--fg);
}
/* the care plan has its own colour and its own lamp, in either mode */
.tone-care, .anchor--care {
  --accent: var(--care); --btn-ink: var(--care-ink);
  --lamp-hot: var(--lamp2-hot); --lamp-mid: var(--lamp2-mid); --lamp-edge: var(--lamp2-edge);
}
:root:not([data-mode="dark"]) .tone-care { --spark: var(--lamp2-edge); }

/* ---- pools: large soft lights that sit behind a section and spill over its edges, so one section flows into
   the next the way the hero's lamp crosses its grid. They drift a little, slowly. */
.pool {
  --size: min(980px, 170vw);
  position: absolute; z-index: 0; pointer-events: none; width: var(--size); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) var(--pool-a, 20%), transparent) 0,
    color-mix(in srgb, var(--accent) calc(var(--pool-a, 20%) * .45), transparent) 42%,
    color-mix(in srgb, var(--accent) calc(var(--pool-a, 20%) * .12), transparent) 72%, transparent 100%);
  animation: pool-drift 24s ease-in-out infinite alternate; will-change: transform;
}
:root[data-mode="dark"] .pool { --pool-a: 15%; }
@keyframes pool-drift { from { transform: translate3d(-3%, -2%, 0) scale(.96); } to { transform: translate3d(3%, 2.5%, 0) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .pool { animation: none; } }
main { overflow-x: clip; }
.section > .shell, .lead > .shell, .pagehead > .shell, .pagefoot > .shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- film grain: one tile over the whole page, stepped like frames (assets/js/grain.js) */
.grain { position: fixed; inset: -128px; z-index: 100; pointer-events: none; background-size: 256px 256px; will-change: transform; }
.grain[hidden] { display: none; }

/* ---- arrival: a soft rise, once. Elements wait only when the script is there to bring them in. */
.js [data-rise] { opacity: 0; transform: translateY(14px); }
.js [data-rise].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 70ms), transform .7s var(--ease-out) calc(var(--i, 0) * 70ms) !important; }
/* a cell in a group stays put (its edges are the line); what is inside it rises */
.js .cells > [data-rise] { opacity: 1; transform: none; }
/* the rise transitions only on the way in, never into the waiting state, which a first paint must not animate */
.js .cells > [data-rise].is-in > * { transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 70ms), transform .7s var(--ease-out) calc(var(--i, 0) * 70ms) !important; }
.js .cells > [data-rise]:not(.is-in) > * { opacity: 0; transform: translateY(14px); }
.reduce [data-rise], .reduce .cells > [data-rise] > * { opacity: 1 !important; transform: none !important; }