/* Shed World: shared page CSS, only what the kit lacks */
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
.rows li > p { color: var(--ink); }
.footer__note { color: var(--muted); font-size: var(--t-small); line-height: 1.6; max-width: 46ch; margin: 0; }
.guide-link { margin-top: var(--s-6); }
.tile > .t-label { margin-bottom: calc(-1 * var(--s-2)); }
.hero__kicker { color: var(--ink); }
/* Schibsted's tabular figures give "." and "," a full figure width ("4 x 3 . 0 m"): keep them for prices only */
.rows__value, .cost-table th { font-variant-numeric: normal; }
/* headings never break a word with a hyphen ("founda-tion"); they wrap at spaces */
h1, h2, h3, .t-h1, .t-h2 { hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 639px) { .rows a.rows__name { display: inline-flex; align-items: center; min-height: 44px; } }
.footer__legal .legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-5); }
/* footer at the tablet: the company line across, the three link columns in one row */
@media (min-width: 640px) and (max-width: 1023px) {
  .closing__links .grid > .span-6 { grid-column: 1 / -1; }
  .closing__links .grid > .footer__col { grid-column: auto / span 4; }
}

/* ---- step 2 polish (impeccable critique + audit) ---- */
/* the live article in a list reads as a link; planned ones say so */
.rows a.rows__name:not([href^="articles.html"]) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.rows a.rows__name:not([href^="articles.html"]):hover { text-decoration-color: currentColor; }
.rows li:has(> a.rows__name:not([href^="articles.html"])) > .rows__value { color: var(--ink); font-weight: 500; }
.rows li:has(> span.rows__name) > .rows__name { font-weight: 400; }
.tile--soon .tile__media { opacity: .82; }
/* the hero's float card is a real link to the latest article */
a.ly-float--link { text-decoration: none; transition: border-color var(--dur) var(--ease); }
a.ly-float--link:hover { border-color: var(--line-strong); }
a.ly-float--link:hover .ly-float__title { text-decoration: underline; text-underline-offset: .2em; }
/* the home close carries the sign-up itself: name, e-mail, button */
.close-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; max-width: 980px; }
.close-form > .btn { height: var(--btn-h); }
.close-form > .form__status, .close-form > .close-form__note { grid-column: 1 / -1; }
.close-form__note { color: var(--muted); max-width: 70ch; }
@media (max-width: 1023px) { .close-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .close-form > .btn { grid-column: 1 / -1; justify-self: start; } }
@media (max-width: 639px) { .close-form { grid-template-columns: minmax(0, 1fr); } .close-form > .btn { justify-self: stretch; } }
/* theme the browser's own surfaces from the palette */
::selection { background: color-mix(in oklab, var(--accent) 28%, transparent); color: inherit; }
:root { accent-color: var(--accent); caret-color: var(--accent); }
/* sections fit their content: the kit's one-screen-per-section heights left dead bands under short sections
   (and ~550px of empty dark close on a phone). The hero and the pinned chapters keep their screens. */
main > :is(section, .section):not(.hero):not([data-moment]), footer.closing { height: auto; min-height: 0; }
main > :is(section, .section):not(.hero):not([data-moment]) > .wrap, footer.closing > .wrap { height: auto; }
footer.closing > .wrap { row-gap: clamp(4rem, 8vw, 7rem); }
main > .section .frame--fill { min-height: clamp(320px, 42vw, 560px); }
/* article: meta line and on-this-page links under the lead */
.article-meta { color: var(--muted); margin-top: var(--s-4); }
.article-meta a { color: inherit; text-underline-offset: .2em; }
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); font-size: var(--t-small); }
.toc__label { color: var(--muted); }
.toc a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent); text-decoration-thickness: 2px; text-underline-offset: .3em; padding-block: var(--s-2); }
.toc a:hover { text-decoration-color: var(--accent); }
html { scroll-padding-top: calc(var(--nav, 64px) + 16px); }
/* the close and the footer stack at their own heights (the kit's g2m split them into two phone screens) */
footer.closing.closing > .wrap { display: grid; grid-template-rows: auto auto; }
.close-form__note a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
/* with auto-height sections a .fill block must keep its content height (flex-basis 0 collapsed it to nothing) */
main > :is(section, .section):not(.hero):not([data-moment]) > .wrap > .fill,
main > :is(section, .section):not(.hero):not([data-moment]) .group > .fill { flex: none; }
@media (max-width: 639px) {
  :root { --padt: 72px; --padb: 40px; }
  #latest .grid > .tile { grid-column: 1 / -1; --tile-ratio: 3 / 2; }
}
/* inputs: a border that holds 3:1 against light, surface and dark grounds (it was 1.5:1 to 1.8:1) */
.field :is(input, select, textarea) { border-color: color-mix(in oklab, var(--ink) 55%, var(--bg)); }
@media (max-width: 639px) { .toc a { padding-block: 12px; min-width: 44px; text-align: center; } .toc { row-gap: 0; } }
/* the pinned chapters hold two screens only while live (pinned); at rest they take their own height */
main > :is(section, .section)[data-moment]:not(.is-live) { height: auto; min-height: 0; }
main > :is(section, .section)[data-moment]:not(.is-live) > .wrap { height: auto; }
/* phone: a row's count sits level with its 44px link, not above it */
@media (max-width: 639px) { .rows > li:has(> a.rows__name) > .rows__value { align-self: center; } }
.inline-link { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.inline-link:hover { text-decoration-color: currentColor; }

/* ---- step 3: interface details (emil-design-eng + animate review) ----
   One timing system, from motion.css: in 150ms / out 120ms / press 90ms on the kit's ease-out (--m-ease).
   Colour changes may fade under reduced motion; anything that moves or scales does not. */

/* press: a clear 3% give, no 1px drop (Emil: 0.95-0.98 reads as "heard you"); same at every width */
html:not([data-motion="off"]) .btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .btn:active,
  html:not([data-motion="off"]):is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:active { transform: scale(.97); }
}
/* our own :active states replace the grey tap flash on phones */
:is(.btn, .nav__toggle, a.tile, .rows a, .toc a) { -webkit-tap-highlight-color: transparent; }

/* focus rings: text links get a little air so descenders are not cut; a whole-card link gets a ring that
   follows its rounded photograph and clears its text */
a:not(.btn, .tile, .menu-card, .ly-float, .skip-link):focus-visible { outline-offset: 3px; }
.btn:focus-visible, .nav__toggle:focus-visible { border-radius: var(--r-btn); }
:is(a.tile, a.menu-card):focus-visible { outline-offset: 6px; border-radius: calc(var(--r-lg) + 6px); }
a.ly-float--link:focus-visible { outline-offset: 3px; border-radius: calc(var(--r-lg) + 3px); }
.skip-link:focus-visible { outline-offset: 2px; }

/* underlines fade instead of snapping (rows, on-this-page, inline and note links, the hero card title) */
.rows a.rows__name, .toc a, .inline-link, .close-form__note a, .article-meta a, a.ly-float--link .ly-float__title {
  transition: text-decoration-color var(--m-out) var(--m-ease), color var(--m-out) var(--m-ease);
}
:is(.rows a.rows__name, .toc a, .inline-link, .close-form__note a, .article-meta a):is(:hover, :focus-visible) { transition-duration: var(--m-in); }
a.ly-float--link .ly-float__title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: transparent; }
a.ly-float--link:is(:hover, :focus-visible) .ly-float__title { text-decoration-color: currentColor; transition-duration: var(--m-in); }
a.ly-float--link { transition: border-color var(--m-out) var(--m-ease); }
a.ly-float--link:is(:hover, :focus-visible) { transition-duration: var(--m-in); }

/* an article tile: its title underlines with the photo's zoom, and the keyboard gets what the pointer gets */
a.tile .tile__head > h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: transparent; transition: text-decoration-color var(--m-out) var(--m-ease); }
a.tile:focus-visible .tile__head > h3 { text-decoration-color: currentColor; transition-duration: var(--m-in); }
@media (hover: hover) and (pointer: fine) {
  a.tile:hover .tile__head > h3 { text-decoration-color: currentColor; transition-duration: var(--m-in); }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) :is(a.tile, a.menu-card):focus-visible :is(.tile__media > img, .frame__img) { transform: scale(1.03); transition-duration: var(--m-image); }
}

/* the topic photographs crossfade (200ms) instead of hard-cutting: the new one fades in on top while the old
   one holds underneath, so the frame never dips to the ground between two photos. Opacity only, so it stays
   under reduced motion too; hidden photos leave the accessibility tree through visibility */
html [data-peek] .frame > .frame__img { transition: opacity 200ms ease, visibility 0s, transform var(--m-image-out) var(--m-ease); }
html [data-peek] .frame > .frame__img:not([hidden]) { z-index: 1; }
html [data-peek] .frame > .frame__img[hidden] { display: block !important; opacity: 0; visibility: hidden;
  transition: opacity 0s linear 200ms, visibility 0s linear 200ms, transform var(--m-image-out) var(--m-ease); }
[data-peek-to] .rows__name::after { transition: opacity var(--m-in) var(--m-ease); }

/* the phone menu button: a tone on hover, a press, and its two bars turn into a close mark (200ms, ease-out) */
.nav__toggle { transition: background-color var(--m-out) var(--m-ease), border-color var(--m-out) var(--m-ease), transform var(--m-press) var(--m-ease); }
@media (hover: hover) and (pointer: fine) { .nav__toggle:hover { background: color-mix(in oklab, var(--bg) 92%, var(--ink)); transition-duration: var(--m-in); } }
.nav__toggle:active { transform: scale(.94); }
.nav__bar-line { transform-box: fill-box; transform-origin: center; transition: transform 200ms var(--m-ease); }
.nav__toggle[aria-expanded="true"] .nav__bar-line--a { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__bar-line--b { transform: translateY(-4px) rotate(-45deg); }

/* a field's error arrives (fades and settles 4px, 180ms) instead of popping; it leaves at once */
.field__error { transition: opacity 180ms var(--m-ease), transform 180ms var(--m-ease); }
@starting-style { .field__error:not([hidden]) { opacity: 0; transform: translateY(-4px); } }

/* in-page jumps ("On this page", "See the chapters") glide so the reader sees where they went */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="off"]) .btn:active, .nav__toggle:active { transform: none !important; }
  .nav__bar-line { transition: none; }
  .field__error { transition-property: opacity; }
  @starting-style { .field__error:not([hidden]) { transform: none; } }
}