/* grisins.lv — style.css
   Implements DESIGN.md. One stylesheet, no @import, no inline styles (CSP).
   Colours: white, ink, one muted grey, one hairline. Nothing else. */

/* 1. Fonts (self-hosted, OFL) ------------------------------------------- */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/SchibstedGrotesk.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20AC, U+2122, U+2190-2199; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/assets/fonts/SchibstedGrotesk-Italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20AC, U+2122, U+2190-2199; }
/* metric-matched fallbacks: computed from the real hhea/hmtx tables */
@font-face { font-family: "Newsreader Fallback"; src: local("Georgia");
  size-adjust: 98%; ascent-override: 75%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback Segoe"; src: local("Segoe UI"), local("SegoeUI");
  size-adjust: 106%; ascent-override: 92%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback Arial"; src: local("Arial"), local("ArialMT");
  size-adjust: 106.5%; ascent-override: 91.7%; descent-override: 24.2%; line-gap-override: 0%; }

/* 2. Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg: #ffffff; --ink: #0a0a0a; --muted: #6b6b6b; --line: #e5e5e5; --focus: #0a0a0a;
  --font-display: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --font-text: "Schibsted Grotesk", "Schibsted Fallback Segoe", "Schibsted Fallback Arial", system-ui, "Segoe UI", Arial, sans-serif;
  --fs-h1: clamp(2.25rem, 1.5rem + 3.33vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.375rem + 1.67vw, 2.625rem);
  --fs-h3: clamp(1.375rem, 1.24rem + 0.6vw, 1.6875rem);
  --fs-lede: clamp(1.1875rem, 1.08rem + 0.48vw, 1.4375rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --fs-404: clamp(7rem, 4rem + 13.5vw, 14rem);
  --lh-h1: 1.05; --lh-h2: 1.15; --lh-h3: 1.25; --lh-lede: 1.4; --lh-body: 1.55; --lh-small: 1.45;
  --measure: 66ch; --measure-head: 24ch;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --gutter: clamp(1.25rem, .5rem + 3.33vw, 3rem);
  --section: clamp(4rem, 2.3rem + 7.6vw, 8rem);
  --w-max: 72rem; --w-form: 40rem;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-link: 200ms; --dur-reveal: 400ms; --dur-hero: 600ms; --dur-404: 700ms;
  --radius: 2px;
}

/* 3. Base --------------------------------------------------------------- */
*, ::before, ::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; hyphens: manual; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text); color: var(--ink); background: var(--bg);
  font-kerning: normal; text-rendering: optimizeLegibility; }
img, svg { display: block; max-inline-size: 100%; }
p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; text-wrap: balance; margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.015em; max-inline-size: var(--measure-head); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; max-inline-size: var(--measure-head); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; }
h1 em { font-style: italic; font-weight: 400; }
.lede { font-size: var(--fs-lede); line-height: var(--lh-lede); max-inline-size: 48ch; }
.prose { max-inline-size: var(--measure); }
.prose > * + * { margin-top: var(--s-4); }
.prose > h2 { margin-top: var(--s-7); }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.1rem; list-style: "– "; margin: 0; }
.prose ol { padding-left: 1.4rem; margin: 0; }
.prose li + li, .facts li + li { margin-top: var(--s-2); }
small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }
.muted { color: var(--muted); }
strong { font-weight: 500; }
.num { font-variant-numeric: lining-nums; }
.num .thin { word-spacing: -0.1em; } /* thousands gap: NBSP narrowed to a thin space (Newsreader space = .222em) */
a[href^="mailto:"], .url { overflow-wrap: anywhere; }
hr, .rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--ink); color: var(--bg); }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 4. Links and buttons -------------------------------------------------- */
a { color: inherit; text-decoration: none; }
.link, .prose a, footer a, .facts a {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--muted), var(--muted));
  background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  padding-bottom: .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--dur-link) var(--ease); }
.nav a:not(.nav-toggle):not(.nav-close), .work-row h3 {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-link) var(--ease); }
.link:hover, .link:focus-visible, .prose a:hover, .prose a:focus-visible, footer a:hover, footer a:focus-visible,
.facts a:hover, .facts a:focus-visible,
.nav a:not(.nav-toggle):not(.nav-close):hover, .nav a:not(.nav-toggle):not(.nav-close):focus-visible,
.nav a[aria-current="page"],
.work-row:hover h3, .work-row:focus-visible h3 { background-size: 100% 1px, 100% 1px; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.5rem;
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--bg);
  font: 500 var(--fs-body)/1.2 var(--font-text); cursor: pointer; text-decoration: none;
  outline: 1px solid transparent; outline-offset: 2px;
  transition: outline-color var(--dur-link) var(--ease), background-color var(--dur-link) var(--ease), color var(--dur-link) var(--ease); }
.button:hover { outline-color: var(--ink); }
.button:active { transform: translateY(1px); }
.button--secondary { background: transparent; color: var(--ink); }
.button--secondary:hover { background: var(--ink); color: var(--bg); }
.button[disabled], .button[aria-disabled="true"] { color: var(--muted); border-color: var(--muted); background: var(--bg); cursor: default; outline-color: transparent; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
:focus:not(:focus-visible) { outline: none; }
.button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* 5. Layout ------------------------------------------------------------- */
.wrap { inline-size: min(100% - 2 * var(--gutter), var(--w-max)); margin-inline: auto; }
.section { padding-block: var(--section); border-top: 1px solid var(--line); scroll-margin-top: var(--s-6); }
.section > .wrap { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr); column-gap: var(--s-8); align-items: start; }
.section-head { position: sticky; top: var(--s-6); }
.section-body > * + * { margin-top: var(--s-6); }
.eyebrow { display: block; font: 500 var(--fs-small)/1 var(--font-text); color: var(--muted); margin-bottom: var(--s-3); }

.hero { padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) var(--section); }
.hero h1 span { display: block; }
.hero .lede { margin-top: var(--s-5); }
.hero .lede span { display: block; }
.actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.actions .link { font-weight: 500; }

/* Services: a list that reads like a menu */
.services, .steps { list-style: none; padding: 0; margin: 0; }
.service { display: grid; border-top: 1px solid var(--line); padding-block: var(--s-6); column-gap: var(--s-5);
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.4fr) minmax(9rem, .6fr); grid-template-areas: "num name scope meta"; }
.service:last-child { border-bottom: 1px solid var(--line); }
.service-num { grid-area: num; font: 500 var(--fs-small)/1.6 var(--font-text); color: var(--muted); }
.service-name { grid-area: name; }
.service-scope { grid-area: scope; list-style: none; margin: 0; padding: 0; }
.service-scope li { position: relative; padding-left: 1rem; }
.service-scope li::before { content: "–"; position: absolute; left: 0; }
.service-scope li + li { margin-top: var(--s-1); }
.service-meta { grid-area: meta; text-align: end; }
.service-text { grid-area: scope; max-inline-size: var(--measure); }
.service--minor { grid-template-columns: 2.5rem minmax(0, 2.4fr) minmax(9rem, .6fr); grid-template-areas: "num name meta" "num text meta"; }
.service--minor .service-text { grid-area: text; margin-top: var(--s-2); }
.price { font: 500 var(--fs-h3)/1.2 var(--font-display); font-optical-sizing: auto; margin: 0; }
.service-meta .small { margin-top: var(--s-1); }

/* Steps */
.steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); border-top: 1px solid var(--line); padding-block: var(--s-5); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-num { font: 400 var(--fs-h3)/1.2 var(--font-display); font-optical-sizing: auto; }
.steps h3 { font: 500 var(--fs-body)/var(--lh-body) var(--font-text); }
.steps p { margin-top: var(--s-1); max-inline-size: var(--measure); }

/* Work row: one block link */
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); padding-block: var(--s-6);
  border-block: 1px solid var(--line); color: inherit; text-decoration: none; }
.work-row h3 { inline-size: fit-content; max-inline-size: 100%; }
.work-row .work-title { margin-top: var(--s-2); max-inline-size: var(--measure); }
.work-row .work-text { margin-top: var(--s-2); max-inline-size: var(--measure); }
.work-row .work-more { display: inline-block; margin-top: var(--s-4); font-weight: 500;
  background-image: linear-gradient(var(--muted), var(--muted)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: .08em; }
.work-meta { white-space: nowrap; }

/* Facts (definition lists) */
.facts { margin: 0; }
.section-body > .facts { margin-top: var(--s-6); }
.facts div { border-top: 1px solid var(--line); padding-block: var(--s-3); }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.facts dd { margin: var(--s-1) 0 0; }
.facts dd ul { list-style: none; margin: 0; padding: 0; }

/* Case study */
.page { padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) var(--section); }
.page-head .kicker { font: 500 var(--fs-small)/var(--lh-small) var(--font-text); color: var(--muted); margin-bottom: var(--s-4); }
.page-head .lede { margin-top: var(--s-5); }
.page-head + .case, .page-head + .prose { margin-top: var(--s-8); }
.case { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, var(--measure)); column-gap: var(--s-8); align-items: start; }
.case-aside { position: sticky; top: var(--s-6); }
.case-body section + section { margin-top: var(--s-8); }
.case-body h2 { margin-bottom: var(--s-4); }
.case-links { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }
.case-links a { font-weight: 500; }

/* Contact */
.contact-links { margin-top: var(--s-6); }
.contact-links p + p { margin-top: var(--s-2); }

/* 6. Header and navigation ---------------------------------------------- */
.skip { position: absolute; left: var(--s-4); top: -100%; padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--bg); font-weight: 500; z-index: 10; }
.skip:focus { top: var(--s-4); }
.site-header { position: relative; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 4.5rem; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 500 1.375rem/1 var(--font-display); font-optical-sizing: auto; letter-spacing: -0.01em; white-space: nowrap;
  /* Newsreader's ink sits high in its line box (tall ascenders, no descenders in the name),
     so against the 14px sans label the wordmark reads as floating. This drops it until the
     two ink centres match. Measured at 22px: ink centres within 0.1px. */
  position: relative; top: 0.11em; }
.nav-toggle, .nav-close { display: none; }
.nav-list { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-block; padding: calc((44px - 1em) / 2) var(--s-2); font: 500 var(--fs-small)/1 var(--font-text); color: inherit; background-origin: content-box; }
.nav .nav-lang { margin-left: var(--s-3); padding-left: var(--s-4); border-left: 1px solid var(--line); }

/* 7. Form ---------------------------------------------------------------- */
.form { max-inline-size: var(--w-form); display: grid; row-gap: var(--s-5); position: relative; }
.field { display: grid; row-gap: var(--s-2); }
.field label { font: 500 var(--fs-small)/var(--lh-small) var(--font-text); }
.field .hint { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.input { inline-size: 100%; min-height: 48px; padding: .75rem .875rem; border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font: inherit; line-height: 1.4; }
textarea.input { min-height: 9rem; resize: vertical; }
.input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.field.is-invalid .input, .input[aria-invalid="true"] { border-width: 2px; padding: calc(.75rem - 1px) calc(.875rem - 1px); }
.input:user-invalid { border-width: 2px; padding: calc(.75rem - 1px) calc(.875rem - 1px); }
.field-error { font: 500 var(--fs-small)/var(--lh-small) var(--font-text); border-left: 2px solid var(--ink); padding-left: var(--s-3); }
.check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--s-3); align-items: start; min-height: 44px; }
.check input { inline-size: 1.25rem; block-size: 1.25rem; margin: .15em 0 0; accent-color: var(--ink); }
.check label { font-size: var(--fs-small); line-height: var(--lh-small); }
.check .field-error { grid-column: 1 / -1; }
.hp { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.status { border-block: 1px solid var(--line); padding-block: var(--s-4); font-weight: 500; }
.status:empty { display: none; }
.form-foot { margin-top: var(--s-5); }
.form-foot p + p { margin-top: var(--s-2); }

/* 8. Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-8) var(--s-7); font-size: var(--fs-small); line-height: var(--lh-small); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--s-6); row-gap: var(--s-7); align-items: start; }
.site-footer p + p, .site-footer li + li, .site-footer ul + p { margin-top: var(--s-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.footer-name { font: 500 1.125rem/1.2 var(--font-display); font-optical-sizing: auto; margin-bottom: var(--s-2); }
.footer-legal { grid-column: 1 / -1; margin: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* 9. 404 ------------------------------------------------------------------ */
main.page-404 { display: grid; padding-block: var(--section); }
main.page-404 > .wrap { display: grid; align-content: center; justify-items: start; }
.page-404 .code { font: 400 var(--fs-404)/1 var(--font-display); font-optical-sizing: auto; letter-spacing: -0.02em; margin: 0 0 var(--s-6) -0.04em; }
.page-404 h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.01em; max-inline-size: none; }
.page-404 h1 span { display: block; }
.page-404 h1 span + span { margin-top: var(--s-2); }
.links-404 { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; font-size: var(--fs-lede); }

/* Simple pages (thanks) */
.page-simple .lede { margin-top: var(--s-5); }
.page-simple .back { margin-top: var(--s-7); font-weight: 500; }

/* 10. Motion -------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { opacity: 0; letter-spacing: .12em; } to { opacity: 1; letter-spacing: -0.02em; } }
.hero h1, .hero .lede, .hero .actions { animation: rise var(--dur-hero) var(--ease) both; }
.hero .lede { animation-delay: 120ms; }
.hero .actions { animation-delay: 240ms; }

/* Typed headline. Each character fades in over 620ms while a new one starts every 34ms, so
   roughly eighteen characters are always mid-reveal: the leading edge is a soft gradient
   rather than a row of switches. Each also drifts up a tenth of an em. On fine pointers a
   slight blur is added; it is omitted on touch because iOS paints `filter: blur()` on a
   shared layer, so waiting or mid-reveal letters smear neighbouring glyphs.
   Characters are laid out from the start and only made transparent, so nothing reflows.
   Without JS the headline keeps the plain rise.
   Fill-mode is `forwards` (not `both`): `both` would apply the from-keyframe during the
   delay, so every still-hidden letter would sit at blur(3px) and stain the ones already shown. */
@keyframes char-reveal {
  from { opacity: 0; transform: translateY(0.10em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes char-reveal-blur {
  from { opacity: 0; transform: translateY(0.10em); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hero h1.is-typed { animation: none; }
/* `.hero h1 span { display: block }` sets the headline lines; the injected word and character
   spans must opt back out of it, or every letter becomes its own line. Words are nowrap so
   the only break opportunities stay the original spaces between them. */
.hero h1.is-typed .w { display: inline; white-space: nowrap; }
.hero h1.is-typed .c { display: inline-block; opacity: 0; transform: translateY(0.10em); }
.hero h1.is-typed.is-running .c { animation: char-reveal 620ms cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: calc(var(--t, 0) * 1ms); }
@media (hover: hover) and (pointer: fine) {
  .hero h1.is-typed.is-running .c { animation-name: char-reveal-blur; }
}
/* Lit / settled: drop the animation and the filter so no compositing layers are left behind.
   `.is-lit` is applied per letter as soon as its own animation ends. */
.hero h1.is-typed.is-running .c.is-lit,
.hero h1.is-typed.is-settled .c { opacity: 1; transform: none; filter: none; animation: none; }
.js [data-reveal] { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(8px); }
.page-404 .code { animation: settle var(--dur-404) var(--ease) both; }
.status:not(:empty) { animation: rise 300ms var(--ease) both; }
.field-error { animation: fade 200ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .lede, .hero .actions, .page-404 .code, .status:not(:empty), .field-error { animation: fade 150ms linear both; animation-delay: 0ms; }
  .hero h1.is-typed .c { opacity: 1; transform: none; filter: none; animation: none; }
  .nav-list, .nav-list li, .burger, .burger::before, .burger::after { transition: none; }
  .js [data-reveal] { transition: opacity 150ms linear; }
  .js [data-reveal]:not(.is-in) { transform: none; }
  .link, .prose a, footer a, .facts a, .nav a, .work-row h3, .button { transition: none; }
  .button:active { transform: none; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* 11. Breakpoints (desktop first: 900, 720, 600) --------------------------- */
@media (max-width: 899.98px) {
  .section > .wrap { display: block; }
  .section-head { position: static; margin-bottom: var(--s-6); }
  .service { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(9rem, .5fr); grid-template-areas: "num name meta" "num scope meta"; }
  .service-scope { margin-top: var(--s-3); }
  .service--minor { grid-template-areas: "num name meta" "num text meta"; }
  .case { display: block; }
  .case-aside { position: static; margin-bottom: var(--s-8); }
}
@media (max-width: 720px) {
  .service, .service--minor { grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "num name" "num scope" "num meta"; row-gap: var(--s-3); }
  .service--minor { grid-template-areas: "num name" "num text" "num meta"; }
  .service-scope, .service--minor .service-text { margin-top: 0; }
  .service-meta { text-align: start; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  /* Mobile navigation: works with CSS only (:target); JS swaps the links for one button.
     The panel slides down under the header rule; the header's own border is the only
     line between header and panel, so nothing appears to shift when it opens. */
  /* Icon button: a 44px square hit area with the three stripes centred inside it. The label
     stays in the DOM as visually-hidden text, so the control keeps its accessible name. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; min-height: 44px; padding: 0; border: 0;
    background: none; color: var(--ink); cursor: pointer; margin-inline-end: -10px; }
  .burger { position: relative; display: block; inline-size: 22px; block-size: 2px;
    background: currentColor; transition: background-color 140ms var(--ease); }
  .burger::before, .burger::after { content: ""; position: absolute; inset-inline-start: 0;
    inline-size: 100%; block-size: 2px; background: currentColor;
    transition: transform 240ms var(--ease); }
  .burger::before { top: -7px; }
  .burger::after { top: 7px; }
  /* Open: the stripes fold into a cross. */
  .nav.is-open .nav-toggle .burger, .burger--x { background: transparent; }
  .nav.is-open .nav-toggle .burger::before, .burger--x::before { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle .burger::after, .burger--x::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-list { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 0 var(--gutter) var(--s-4);
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 200ms var(--ease), transform 260ms var(--ease), visibility 0s linear 260ms; }
  .nav:target .nav-list, .nav.is-open .nav-list { visibility: visible; opacity: 1; transform: none;
    transition: opacity 200ms var(--ease), transform 260ms var(--ease), visibility 0s; }
  .js .nav:target:not(.is-open) .nav-list { visibility: hidden; opacity: 0; transform: translateY(-0.5rem); }
  .nav:target .nav-toggle { display: none; }
  .nav:target .nav-close { display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px; min-height: 44px; padding: 0; border: 0;
    color: var(--ink); margin-inline-end: -10px; }
  .nav-list li { border-top: 1px solid var(--line); opacity: 0; transform: translateY(-3px);
    transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
  .nav-list li:first-child { border-top: 0; }
  .nav:target .nav-list li, .nav.is-open .nav-list li { opacity: 1; transform: none; }
  .nav:target .nav-list li:nth-child(1), .nav.is-open .nav-list li:nth-child(1) { transition-delay: 60ms; }
  .nav:target .nav-list li:nth-child(2), .nav.is-open .nav-list li:nth-child(2) { transition-delay: 100ms; }
  .nav:target .nav-list li:nth-child(3), .nav.is-open .nav-list li:nth-child(3) { transition-delay: 140ms; }
  .nav:target .nav-list li:nth-child(4), .nav.is-open .nav-list li:nth-child(4) { transition-delay: 180ms; }
  .nav:target .nav-list li:nth-child(5), .nav.is-open .nav-list li:nth-child(5) { transition-delay: 220ms; }
  .nav-list a { display: flex; align-items: center; min-height: 52px; width: 100%; padding: 0 var(--s-2); background-origin: border-box; }
  .nav .nav-lang { margin-left: 0; padding-left: var(--s-2); border-left: 0; }
}
@media (max-width: 600px) {
  .work-row { grid-template-columns: minmax(0, 1fr); }
  .work-meta { white-space: normal; order: -1; }
}