/*
  Pico.css (assets/css/vendor/pico.min.css) is loaded before this file and
  provides the reset, typography and form styling. Everything below only
  adds what Pico intentionally leaves out: a responsive spanning grid
  (Pico's own `.grid` is just equal-width auto-fit columns), the burger
  menu, the dark/light toggle and this starterkit's components.

  Pico exposes its whole palette as `--pico-*` custom properties and
  automatically swaps them when `data-theme="dark"` is set on <html>
  (see the inline script in the header snippet). We alias the palette
  below so every component here follows the toggle for free.
*/

/*
  Fonts (self-hosted, no third-party request — keeps the site GDPR-clean).
  One SIL OFL variable family lives in assets/fonts/: Atkinson Hyperlegible
  Next for everything (prose, titles and UI) and its sibling Atkinson
  Hyperlegible Mono for code. Designed by the Braille Institute for
  low-vision readers; they keep look-alikes such as I/l/1 and O/0
  distinct, which matters in technical text (IPs, commands, configs).
  Only the Latin subset is shipped (covers Finnish ä/ö/å).
  Upright and italic are each a single variable file spanning the whole
  weight range, so
  `font-weight` interpolates freely. `font-display: swap` shows fallback
  text immediately, then swaps once the woff2 arrives.
*/
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-mono-italic.woff2") format("woff2");
}

:root {
  --padding: var(--pico-spacing);

  /*
    Atkinson becomes Pico's sans-serif, which is the base family for the
    whole page: prose, titles, nav, logo, buttons, footer.
  */
  --pico-font-family-sans-serif: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, var(--pico-font-family-emoji);

  --color-text: var(--pico-color);
  --color-text-grey: var(--pico-muted-color);
  --color-background: var(--pico-background-color);
  --color-border: var(--pico-muted-border-color);

  /* "ink" pair: a strong accent that inverts with the theme */
  --color-black: var(--pico-contrast);
  --color-white: var(--pico-contrast-inverse);

  /* subtle tinted surface, used for pills/boxes */
  --color-light: var(--pico-card-sectioning-background-color);
  --color-grey: var(--pico-muted-color);

  /*
    Code blocks stay dark in both themes, tinted plum to match the site.
    Light mode uses the plum "ink" as the block surface; dark mode (see
    the [data-theme="dark"] block) drops it below the page colour and
    adds a hairline border so the block still reads as a block. Every
    token colour was checked against the block, the header bar and both
    themes: the lowest is 5.8:1 (comments in light mode), the header
    bar label is 6.3:1, and most pairs clear AAA (7:1).
  */
  --color-code-bg:          #2a1a2f;
  --color-code-header-bg:   #36223c;
  --color-code-border:      transparent;
  --color-code-divider:     #4a3350;
  --color-code-text:        #e9dfea;
  --color-code-muted:       #b8a6bb; /* header bar label, copy button */
  --color-code-comment:     #a596a8;
  --color-code-punctuation: #c9b8cc;
  --color-code-keyword:     #e7a2dc; /* orchid */
  --color-code-function:    #8fc4f2; /* blue */
  --color-code-string:      #b8db8e; /* green */
  --color-code-number:      #f4b57e; /* orange */
  --color-code-key:         #f4a3b0; /* rose: YAML/INI keys, tags, vars */
  --color-code-property:    #f0d68e; /* yellow */
  --color-code-operator:    #8fd6ca; /* aqua */

  --font-family-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --pico-font-family-monospace: var(--font-family-mono);
}

/*
  Plum theme
  ----------
  Pico ships a neutral slate ramp — near-black text/headings on white in
  light mode, light greys on near-black in dark mode. That's the
  "black & white" look. Here we retint the whole ramp toward a dark plum
  by overriding the Pico palette variables the components already read
  through (body `--pico-color`, the six `--pico-h*-color` heading levels,
  the `--pico-contrast` "ink" accent used by .cta/.pagination/hr, the
  muted text and the tinted surfaces). The `--color-*` aliases above
  reference these, so they follow along for free.

  Every foreground/background pair below was checked against WCAG 2.1 AA
  (4.5:1 for normal text, 3:1 for large text/UI). The lowest ratio in
  either theme is 5.8:1 (muted text on the tinted card surface); most
  pairs clear AAA (7:1). See the ratios in the commit / review notes.
*/
:root {
  /* light mode: dark plum ink on an almost-white plum-tinted page */
  --pico-background-color: #fdfafc;
  --pico-color: #3a2340;   /* body text        13.6:1 */
  --pico-h1-color: #2b1830;/* headings, dark → light */
  --pico-h2-color: #3a2340;
  --pico-h3-color: #4a2f4d;
  --pico-h4-color: #574260;
  --pico-h5-color: #63506b;
  --pico-h6-color: #6d5270;
  --pico-contrast: #2b1730;          /* "ink" accent     16.0:1 */
  --pico-contrast-background: #2b1730;
  --pico-contrast-inverse: #fdfafc;  /* text on ink */
  --pico-muted-color: #6d5270;       /* 6.6:1 / 5.8:1 on card */
  --pico-muted-border-color: #e4d7e6;
  --pico-card-sectioning-background-color: #f3ebf2; /* tinted surface */

  /*
    One accent on top of the plum ramp: the orchid of the code blocks'
    keywords, darkened for the light page. Used sparingly, for link
    hovers, the short section rules, focus rings and text selection.
    7.5:1 on the page, 6.6:1 on the tinted surface.
  */
  --color-accent: #8a2a7e;
  --pico-text-selection-color: rgba(138, 42, 126, .18);
}

/*
  Dark mode: a dark-plum page instead of Pico's slate near-black, with a
  light plum-grey ramp. The "ink" accent inverts to a pale lavender so
  .cta and friends stay legible.
*/
[data-theme="dark"] {
  --pico-background-color: #1c141f;
  --pico-color: #d4c6d6;   /* body text        11.0:1 */
  --pico-h1-color: #f0e7f1;
  --pico-h2-color: #e2d5e4;
  --pico-h3-color: #c9b8cc;
  --pico-h4-color: #beb0c1;
  --pico-h5-color: #b0a2b3;
  --pico-h6-color: #a596a8;
  --pico-contrast: #efe6f0;          /* pale lavender ink 14.8:1 */
  --pico-contrast-background: #efe6f0;
  --pico-contrast-inverse: #1c141f;  /* text on ink */
  --pico-muted-color: #a596a8;       /* 6.4:1 / 5.9:1 on card */
  --pico-muted-border-color: #35283a;
  --pico-card-sectioning-background-color: #271b2b;

  /* the code blocks' orchid as is: 9.1:1 on the page, 8.3:1 on card */
  --color-accent: #e7a2dc;
  --pico-text-selection-color: rgba(231, 162, 220, .28);

  /* code blocks sink below the page instead of rising above it */
  --color-code-bg:        #130c16;
  --color-code-header-bg: #1f1524;
  --color-code-border:    #3d2d42;
  --color-code-divider:   #3d2d42;
}

/* Atkinson is set wide; tighten large titles a touch. */
.text h1, .text h2, .text h3,
.intro,
.h1, .h2 {
  letter-spacing: -0.01em;
}

/*
  Pico turns every <article> into a card: tinted background, padding,
  shadow, rounded corners, and full-bleed header/footer bands pulled out
  with negative margins. The templates use <article> purely for
  semantics, so undo all of it and let the page layout carry them.
*/
article,
article > header,
article > footer {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
article {
  margin-bottom: 0;
  padding: 0;
}
article > header {
  margin-top: 0;
}
article > footer {
  margin-bottom: 0;
}

/*
  Hidden off-screen by its own height rather than a fixed offset: Pico
  scales the root font size up on wide screens, so a hard-coded `top`
  could leave the bottom edge of the link peeking into the viewport.
*/
.skip-link {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  left: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--color-background);
  color: var(--color-text);
  border: 2px solid var(--color-text);
  transition: transform .2s ease;
}
.skip-link:focus {
  transform: translateY(1rem);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

body {
  padding: var(--padding);
  max-width: 75rem;
  margin: 0 auto;
}

/*
  A faint glow of the accent behind the header, fading out well before
  the content. It sits on <html> so it spans the full window width
  rather than the centred body column, and scrolls away with the page.
  At this strength it shifts the page colour too little to change any
  of the contrast ratios above.
*/
html {
  background-image: radial-gradient(
    ellipse 70rem 32rem at 20% -8rem,
    color-mix(in srgb, var(--color-accent) 9%, transparent),
    transparent 70%
  );
  background-repeat: no-repeat;
}
img {
  width: 100%;
}
/*
  Pico styles plain `ul li` with a square marker (specificity 0,0,2),
  which a bare `li` reset can't beat regardless of source order.
*/
ul li,
ol li {
  list-style: none;
}
/*
  With the markers gone, the browser's default 40px list indent only
  shifts layout lists (note grids, footer links, tags) off the page's
  left edge. Prose lists inside `.text` bring their markers back, so
  they keep the indent the markers hang in.
*/
ul:not(.text ul),
ol:not(.text ol) {
  padding-left: 0;
}
a {
  color: currentColor;
  text-decoration: none;
}

/*
  One focus ring for every link and button, in the accent so it stands
  out from the plum text in both themes. Components that need a
  different offset (album cards, code blocks) override it below.
*/
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: none;
}

/* Hidden visually but still read by screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bg-light {
  background-color: var(--color-light);
}
.color-grey {
  color: var(--color-text-grey);
}

/* -------------------------------------------------------------------- */
/* Header, burger menu & theme toggle                                   */
/* -------------------------------------------------------------------- */

.header {
  position: relative;
  margin-bottom: 4.5rem;
}

.header-bar {
  display: flex;
  /*
    The logo and the nav links are different font sizes, so centering
    their boxes (align-items: center) doesn't actually line up their
    text baselines — larger text has proportionally more ascent above
    the baseline, so a size-centered box sits the glyphs lower. Baseline
    alignment lines up the text itself instead; .header-controls opts
    back into center below since its icon buttons have no text baseline
    to align to.
  */
  align-items: baseline;
  gap: 1rem;
  /*
    No min-height here: it used to force the row taller than its
    content, which then made .header-controls's align-self: center
    center against that padded height instead of where the baseline
    alignment actually placed the text, throwing the icons out of
    alignment with the logo. Content (the nav links' own padding)
    already gives the row a comfortable height.
  */

  /* A hairline that sets the bar apart from the page below it. */
  border-bottom: 1px solid var(--color-border);
}

.logo {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
}

.header-controls {
  flex-shrink: 0;
  align-self: center;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  /* Pico gives every <button> a default margin-bottom as part of its
     form spacing, which inflated this button's margin box and threw
     off how it centered inside .header-controls. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--color-light);
}
.theme-toggle svg {
  /* Inline (the default for svg) reserves descender space via the
     inherited line-height, nudging the icon down inside the button
     instead of it sitting exactly where align-items/justify-content
     center it. */
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}
.theme-toggle .icon-sun {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .3125rem;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
.burger:hover,
.burger:focus-visible {
  background: var(--color-light);
}
.burger span {
  display: block;
  width: 1.25rem;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(.4375rem) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-.4375rem) rotate(-45deg);
}

.menu {
  flex: 1;
  display: flex;
  /* Pico's own `nav{justify-content:space-between}` default would
     otherwise spread these links across the full row. */
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.menu a {
  padding: 1rem;
  display: block;
}
.menu a:hover {
  color: var(--color-accent);
}
.menu a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}

@media screen and (max-width: 59.99rem) {
  .header-bar {
    /*
      align-items: baseline (set above for desktop) only makes sense
      while both .logo and .menu are on the row so their text baselines
      have something to line up with. Here .menu drops out of the flex
      layout entirely (display: none, it's a dropdown instead), leaving
      .logo as the only baseline-participating item — which pins it to
      the top of the row instead of centering it. Fall back to center.
    */
    align-items: center;
  }

  .burger {
    display: flex;
  }

  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: .5rem 0 1.5rem;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    z-index: 20;
  }
  .menu.is-open {
    display: flex;
  }
  .menu a {
    padding: .75rem 1rem;
  }
}

/* -------------------------------------------------------------------- */
/* Responsive grid (Pico ships no spanning grid, so this fills the gap) */
/* -------------------------------------------------------------------- */

.section {
  padding: 3rem 0;
}

.rgrid {
  --columns: 12;
  --gutter: 3rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: 1fr;
}
.rgrid > .rgrid-col {
  margin-bottom: var(--gutter);
}

.autogrid {
  --gutter: 3rem;
  --min: 10rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}

@media screen and (min-width: 60rem) {
  body {
    --padding: 3rem;
  }

  .rgrid {
    grid-template-columns: repeat(12, 1fr);
  }
  .rgrid > .rgrid-col {
    grid-column: span var(--columns);
  }
}

/* -------------------------------------------------------------------- */
/* Typography & prose                                                   */
/* -------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.text {
  line-height: 1.5em;
}
/*
  Prose links keep the text colour with an accent underline, which
  thickens and takes over the text on hover.
*/
.text a {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s ease, text-decoration-thickness .2s ease;
}
.text a:hover {
  color: var(--color-accent);
  text-decoration-thickness: 2px;
}
.text :first-child {
  margin-top: 0;
}
.text :last-child {
  margin-bottom: 0;
}
.text p,
.text ul,
.text ol {
  margin-bottom: 1.5rem;
}
.text ul,
.text ol {
  margin-left: 1rem;
}
.text ul p,
.text ol p {
  margin-bottom: 0;
}
.text ul > li {
  list-style: disc;
}
.text ol > li {
  list-style: decimal;
}
.text ul ol,
.text ul ul,
.text ol ul,
.text ol ol {
  margin-bottom: 0;
}
.text h1,
.h1,
.intro {
  font-size: 2rem;
  margin-bottom: 3rem;
  line-height: 1.25em;
}
.text h2,
.h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.text h3,
.h3 {
  font-weight: 600;
}
/*
  Inline code. A mono face set at the prose size looks a size too big
  next to it, so it's nudged down. It stays inline (not inline-block)
  and may break anywhere, so a long path or URL wraps at the line end
  instead of pushing the page sideways on a phone.
*/
.text code {
  font-family: var(--font-family-mono);
  font-size: .875em;
  background: var(--color-light);
  color: var(--color-text);
  padding: .1em .35em;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/*
  Code blocks. assets/js/index.js wraps every `.text pre` in a
  `.codeblock` with a header bar (language label + copy button); without
  JS the bare <pre> below still gets the full look. Token colours live
  in prism.css.
*/
.text .codeblock {
  margin: 2.5rem 0;
  border: 1px solid var(--color-code-border);
  background: var(--color-code-bg);
  /* lets the <pre> scroll inside instead of widening the grid column */
  display: grid;
  min-width: 0;
}
.text pre {
  margin: 2.5rem 0;
  padding: 1.25rem;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-size: .875em;
  line-height: 1.6;
  /* a scrollbar only when a line is actually too long */
  overflow-x: auto;
  overflow-y: hidden;
}
.text .codeblock pre {
  margin: 0;
}
.text pre:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}
.text pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}

.codeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  padding: 0 .375rem 0 1.25rem;
  background: var(--color-code-header-bg);
  border-bottom: 1px solid var(--color-code-divider);
  color: var(--color-code-muted);
  font-size: .8125rem;
  line-height: 1;
}
.codeblock-lang {
  font-family: var(--font-family-mono);
  letter-spacing: .02em;
}
.codeblock-copy {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin: 0 0 0 auto;
  padding: .375rem .625rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--color-code-muted);
  font: inherit;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.codeblock-copy svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.codeblock-copy:hover {
  color: var(--color-code-text);
  background: var(--color-code-bg);
}
.codeblock-copy:focus-visible {
  color: var(--color-code-text);
  outline: 2px solid var(--color-code-text);
  outline-offset: -2px;
}
.codeblock-copy[data-copied] {
  color: var(--color-code-string);
}
.text hr {
  margin: 6rem 0;
}
.text dt {
  font-weight: 600;
}
.text blockquote {
  font-size: 1.25rem;
  line-height: 1.325em;
  border-left: 2px solid var(--color-accent);
  padding-left: 1rem;
  margin: 3rem 0;
  max-width: 25rem;
}
.text blockquote footer {
  font-size: .875rem;
  font-style: italic;
}
.text figure {
  margin: 3rem 0;
}
.text figcaption {
  padding-top: .75rem;
  color: var(--color-text-grey);
}
.text figure ul {
  line-height: 0;
  display: grid;
  gap: 1.5rem;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.text figure ul li {
  list-style: none;
}

hr {
  border: 0;
  background: currentColor;
  height: 2px;
  width: 1.5rem;
  margin: 3rem auto;
}

.align-center {
  text-align: center;
}

.intro {
  max-width: 40rem;
}
.intro *:not(:last-child) {
  margin-bottom: 1em;
}

.cta {
  background: var(--color-black);
  color: var(--color-white);
  display: inline-flex;
  justify-content: center;
  padding: .75rem 1.5rem;
  border: 4px solid var(--color-white);
  outline: 2px solid var(--color-black);
}

.box {
  background: var(--color-light);
  padding: 1.5rem;
  border: 4px solid var(--color-background);
  outline: 2px solid var(--color-light);
}

.video,
.img {
  position: relative;
  display: block;
  --w: 1;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background: var(--color-light);
}
.img img,
.video iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.img[data-contain] img {
  object-fit: contain;
}
.img-caption,
.video-caption {
  padding-top: .75rem;
  line-height: 1.5em;
}

/*
  Album cards (site/snippets/album-card.php): a 4:5 cover with the title
  and photo count underneath, on the Valokuvat page and the home page.
  The cover zooms in slightly on hover and keyboard focus; the focus
  ring sits on the card's link so keyboard users get the same cue.
*/
.album-card {
  display: block;
}
.album-card .img {
  overflow: hidden;
}
.album-card .img img {
  transition: transform .4s ease;
}
.album-card:hover .img img,
.album-card:focus-visible .img img {
  transform: scale(1.04);
}
.album-card:focus-visible {
  outline-offset: 4px;
}

.album-card .img-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.album-card-title {
  font-weight: 600;
}
.album-card:hover .album-card-title {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.album-card-meta {
  flex-shrink: 0;
  font-size: .875rem;
  color: var(--color-text-grey);
  font-variant-numeric: tabular-nums;
}

.footer {
  padding: 6rem 0;
  line-height: 1.5em;
}
.footer:before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: 1.5rem;
}

.footer h2 {
  font-weight: 600;
  margin-bottom: .75rem;
}
.footer ul,
.footer p {
  color: var(--color-text-grey);
}
.footer p {
  max-width: 15rem;
}
.footer a:hover {
  color: var(--color-text);
}
/*
  Bottom line: copyright, licence, privacy. The items are separate
  spans so they can wrap onto their own lines on narrow screens; the
  dot separators are drawn in CSS so screen readers don't announce them.
*/
.footer .footer-legal {
  max-width: none;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  column-gap: .75rem;
  font-size: .875rem;
}
.footer-legal > span:not(:last-of-type)::after {
  content: "·";
  margin-left: .75rem;
}
.footer-legal a {
  text-decoration: underline;
}
/* "Takaisin ylös" sits at the far end of the line, wrapping under it on phones. */
.footer-legal .footer-top {
  margin-left: auto;
  text-decoration: none;
}
.footer-top span {
  display: inline-block;
  color: var(--color-accent);
  transition: transform .2s ease;
}
.footer-top:hover span,
.footer-top:focus-visible span {
  transform: translateY(-.125rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.map {
  --w: 2;
  --h: 1;
  padding-bottom: calc(100% / var(--w) * var(--h));
  position: relative;
  overflow: hidden;
  background: var(--color-light);
}
.map iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.margin-s {
  margin-bottom: .75rem;
}
.margin-m {
  margin-bottom: 1.5rem;
}
.margin-l {
  margin-bottom: 3rem;
}
.margin-xl {
  margin-bottom: 4.5rem;
}
.margin-xxl {
  margin-bottom: 6rem;
}

.pagination {
  display: flex;
  padding-top: 6rem;
}
.pagination > span {
  color: var(--color-text-grey);
}
.pagination > * {
  padding: .5rem;
  width: 3rem;
  text-align: center;
  border: 2px solid currentColor;
  margin-right: 1.5rem;
}
.pagination > a:hover {
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/*
  Notes list (site/snippets/note-row.php), on the home page and the
  Muistiinpanot page: a text-first list rather than image cards. The date is set in the code font, a small nod to the
  technical content; on wide screens it becomes a left-hand column so
  the titles line up.
*/
.note-list {
  max-width: 48rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.note-row {
  display: grid;
  gap: .25rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
}
.note-row:last-child {
  border-bottom: 1px solid var(--color-border);
}
.note-row-date {
  font-family: var(--font-family-mono);
  font-size: .875rem;
  color: var(--color-text-grey);
  font-variant-numeric: tabular-nums;
}
.note-row-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .375rem;
}
.note-row-title a {
  transition: color .2s ease;
}
.note-row-title a:hover,
.note-row-title a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.note-row-excerpt {
  margin-bottom: .5rem;
  color: var(--color-text-grey);
  line-height: 1.55;
}
.note-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0;
  font-size: .8125rem;
}
.note-row-tags a {
  display: block;
  padding: .125rem .5rem;
  background: var(--color-light);
  color: var(--color-text);
}
/* The "#" is decoration; the empty alt keeps screen readers quiet. */
.note-row-tags a::before {
  content: "#" / "";
  color: var(--color-accent);
  margin-right: .0625rem;
}
.note-row-tags a:hover::before {
  color: inherit;
}
.note-row-tags a:hover {
  background: var(--color-black);
  color: var(--color-white);
}

@media screen and (min-width: 45rem) {
  .note-row {
    grid-template-columns: 7.5rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}

.note-excerpt {
  line-height: 1.5em;
}
.note-excerpt header {
  margin-bottom: 1.5rem;
}
.note-excerpt-title {
  font-weight: 600;
}
.note-excerpt-date {
  color: var(--color-text-grey);
}