/* ==========================================================================
   Fem Noll Noll — femnollnoll.se
   Type: Fraunces (display), Inter Tight (text).
   Palette: black, grey, white. Every colour here has R = G = B.
   ========================================================================== */

/* ---- fonts (vendored, latin subset) ------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../vendor/fonts/fontsource-variable-fraunces-5.3.0/files/fraunces-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../vendor/fonts/fontsource-variable-fraunces-5.3.0/files/fraunces-latin-opsz-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../vendor/fonts/fontsource-variable-inter-tight-5.3.0/files/inter-tight-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ------------------------------------------------------------- */

:root {
  --black: #0a0a0a;
  --white: #f4f4f4;
  --ink-on-black: #f2f2f2;
  --ink-on-white: #0e0e0e;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-sans: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --m: clamp(1.25rem, 4vw, 4rem);
  --pad: clamp(6.5rem, 15vw, 13rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vh: 1vh;
  --lvh: 1vh;
}
@supports (height: 1svh) {
  :root { --vh: 1svh; --lvh: 1lvh; }
}

/* two grounds: every section paints itself, so nothing depends on script */
[data-theme='dark'] {
  --bg: var(--black);
  --fg: var(--ink-on-black);
  --muted: #9a9a9a;
  --rule: rgba(255, 255, 255, 0.16);
  --tint: #161616;
}
[data-theme='light'] {
  --bg: var(--white);
  --fg: var(--ink-on-white);
  --muted: #5c5c5c;
  --rule: rgba(0, 0, 0, 0.16);
  --tint: #e7e7e7;
}

/* ---- base --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--black);
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--ink-on-black);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
em { font-style: italic; }

::selection { background: var(--ink-on-black); color: var(--black); }
[data-theme='light'] ::selection { background: var(--ink-on-white); color: var(--white); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--fg, var(--ink-on-black));
  outline-offset: 4px;
  border-radius: 2px;
}

/* sections take focus after an in-page jump; they need no ring of their own */
[tabindex='-1']:focus-visible { outline: none; }

/* SplitText line masks: room for descenders and for å ä ö */
.sl-mask { padding: 0.12em 0 0.2em; margin: -0.12em 0 -0.2em; }
.sl { will-change: transform; }

.skip {
  position: fixed;
  left: var(--m);
  top: 0.75rem;
  z-index: 200;
  padding: 0.7rem 1rem;
  background: var(--white);
  color: var(--ink-on-white);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0.3rem;
  transform: translateY(-300%);
}
.skip:focus-visible { transform: none; outline-color: var(--ink-on-white); outline-offset: -5px; }

.wrap {
  width: min(100% - 2 * var(--m), 84rem);
  margin-inline: auto;
}

/* small arrow drawn with a mask, so it never falls back to another font */
.arr {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.arr--u { transform: rotate(-90deg); }

/* ---- shared type -------------------------------------------------------- */

.eyebrow {
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.15rem, 5.3vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
  max-width: 16ch;
}
.display--s { font-size: clamp(2rem, 4.2vw, 3.6rem); }

.lead {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.25rem, 1.95vw, 1.7rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

.prose { display: grid; gap: 1.2em; align-content: start; color: var(--muted); max-width: 32em; }
.prose p { text-wrap: pretty; }

/* placeholders the owner fills in: quiet, but plainly not finished text */
.ph {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1.5;
  color: var(--fg);
  border: 1px dashed var(--muted);
  border-radius: 0.25rem;
  padding: 0.3em 0.65em;
}
p.ph { justify-self: start; display: inline-block; }
.ph--block { display: block; padding: 1.1rem 1.2rem; width: min(100%, 32rem); }

.section {
  position: relative;
  padding: var(--pad) 0;
  background: var(--bg);
  color: var(--fg);
}

.head { display: grid; gap: clamp(1.5rem, 2.8vw, 2.4rem); }

.cols {
  display: grid;
  gap: clamp(1.8rem, 4vw, 4rem);
  margin-top: clamp(3rem, 7vw, 6rem);
}
@media (min-width: 56rem) {
  .cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .cols > :first-child { max-width: 25em; }
}

/* ==========================================================================
   NAV — an open bar over the hero, a thin bar of glass after it.
   On the left one slot shared by the mark and the name: the mark while the
   name stands large in the hero, the name once that has left.
   Without script: the bar rests at the top of the page, mark and name together.
   ========================================================================== */

.nav {
  position: absolute;
  z-index: 60;
  inset: 0 0 auto 0;
  color: var(--fg);
  pointer-events: none;
  --nav-glass: rgba(10, 10, 10, 0.8);
  --nav-line: rgba(255, 255, 255, 0.14);
  --nav-pad: clamp(1rem, 2vw, 1.6rem);
  --nav-pad-thin: 0.6rem;
  --link-pad: 0.55rem;
  transition: color 0.4s ease;
}
.nav[data-theme='light'] {
  --nav-glass: rgba(244, 244, 244, 0.84);
  --nav-line: rgba(0, 0, 0, 0.12);
}
/* following the page needs the script that reads the ground under the bar */
.js .nav { position: fixed; }

/* the glass and its rule are one layer, so they arrive and leave together */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-glass);
  border-bottom: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.5s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.nav--scrolled::before { opacity: 1; }

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--nav-pad) max(var(--m), env(safe-area-inset-right, 0px)) var(--nav-pad) max(var(--m), env(safe-area-inset-left, 0px));
  transition: padding 0.7s var(--ease);
}
/* with less motion the bar keeps its thin height from the start, so nothing
   jumps when the glass arrives */
.nav--scrolled .nav__in,
.is-still .nav__in { padding-top: var(--nav-pad-thin); padding-bottom: var(--nav-pad-thin); }

/* -- brand: the mark and the name -- */

.nav__brand {
  --mark: 1.5rem;
  --morph: 480ms cubic-bezier(0.33, 0, 0.2, 1);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--mark);
  pointer-events: auto;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* a target larger than the mark itself */
.nav__brand::after { content: ''; position: absolute; inset: -0.6rem; }

.mark { fill: none; stroke: currentColor; stroke-width: 1.1; flex: none; }
.nav__mark { width: var(--mark); height: var(--mark); }
.nav__name { flex: none; }

/* With script the two take turns in the slot. Going to the name: the slot
   widens, the name opens out of the mark's footprint and the mark steps back.
   Going to the mark: the name folds into that footprint and the mark comes
   forward a moment later. Each rule carries the timing of the way into its
   own state. */
.js .nav__brand {
  gap: 0;
  max-width: var(--mark);
  transition: max-width var(--morph);
}
.js .nav__mark {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform var(--morph) 100ms, opacity 160ms ease 180ms;
}
.js .nav__name {
  transform-origin: 0 50%;
  transform: scale(0.2, 0.68);
  opacity: 0;
  transition: transform var(--morph), opacity 240ms ease 140ms;
}
.js .nav--compact:not(.nav--tight) .nav__brand { max-width: var(--name-w, 7.5rem); }
.js .nav--compact:not(.nav--tight) .nav__mark {
  transform: scale(0.7);
  opacity: 0;
  transition-delay: 0ms, 0ms;
}
.js .nav--compact:not(.nav--tight) .nav__name {
  transform: none;
  opacity: 1;
  transition-delay: 0ms, 85ms;
}

/* -- links -- */

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.3rem, 1.6vw, 1.3rem);
  margin-right: calc(var(--link-pad) * -1);
  pointer-events: auto;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem var(--link-pad);
  font-size: 0.875rem;
  font-weight: 450;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: var(--link-pad);
  right: var(--link-pad);
  bottom: 0.3rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); transform-origin: left; }

/* less motion: the bar and the brand change state without travelling.
   The same holds for the first reading after load, which is a state and not
   a change. */
.is-still .nav,
.is-still .nav::before,
.is-still .nav__in,
.is-still .nav__brand,
.is-still .nav__mark,
.is-still .nav__name,
.nav.is-setting,
.nav.is-setting::before,
.nav.is-setting .nav__in,
.nav.is-setting .nav__brand,
.nav.is-setting .nav__mark,
.nav.is-setting .nav__name { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav::before,
  .nav__in,
  .js .nav__brand,
  .js .nav__mark,
  .js .nav__name { transition: none; }
}

/* ==========================================================================
   HERO — a tree in cross-section, and two words lying on its rings
   Without script: stacked plates, a CSS drawing, the words set straight on it.
   With script and motion: one sticky stage, one canvas, the words on the rings.
   With script and reduced motion: stacked plates, one still, the words on it.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--black);
  color: var(--fg);
  /* disc radius and centre at rest, the same numbers computeLayout() uses */
  --S: min(64vw, calc(var(--vh) * 31));
  --cx: 50vw;
  --cy: calc(var(--vh) * 49);
}
[data-layout='wide'] .hero {
  --S: min(calc(var(--vh) * 38.5), 30vw);
  --cx: 50vw;
  --cy: calc(var(--vh) * 52);
}

.hero__stage { position: relative; }

.hero__art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.is-motion .hero__art::after {
  /* the wood fades into the ground before the stage scrolls away */
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 26%;
  background: linear-gradient(rgba(10, 10, 10, 0), var(--black) 92%);
  opacity: var(--foot, 0);
}

.hero__canvas,
.plate__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__canvas.is-on,
.plate__still.is-on { opacity: 1; }
/* a still ends where the next block begins: let it run out before the edge */
.plate__still {
  -webkit-mask-image: linear-gradient(#000 95%, transparent);
  mask-image: linear-gradient(#000 95%, transparent);
}

/* the drawing when there is no canvas at all */
.hero__rings {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: calc(var(--S) * 2);
  height: calc(var(--S) * 2);
  margin: calc(var(--S) * -1) 0 0 calc(var(--S) * -1);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 47% 45%,
      rgba(255, 255, 255, 0) 0 3px, rgba(255, 255, 255, 0.34) 3px 4px,
      rgba(255, 255, 255, 0) 4px 9px, rgba(255, 255, 255, 0.22) 9px 10px,
      rgba(255, 255, 255, 0) 10px 13px, rgba(255, 255, 255, 0.42) 13px 14px,
      rgba(255, 255, 255, 0) 14px 21px, rgba(255, 255, 255, 0.18) 21px 22px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.js:not(.no-scene) .hero__rings { display: none; }

.plate {
  position: relative;
  height: calc(var(--vh) * 100);
  min-height: 30rem;
  overflow: hidden;
  z-index: 2;
}

/* -- mode: motion. One sticky stage, plates overlaid. -- */
.is-motion .hero { height: 250vh; }
.is-motion .hero__stage {
  position: sticky;
  top: 0;
  height: calc(var(--lvh) * 100);
  overflow: hidden;
}
.is-motion .plate {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 0;
  pointer-events: none;
}
/* waiting off stage, but never hidden from a screen reader */
.is-motion .plate--statement { opacity: 0; }

/* intro: hidden until the script reveals it, or until the failsafe says show */
.is-motion:not(.is-ready) .title__h .w__in,
.is-motion:not(.is-ready) [data-intro],
.is-motion:not(.is-ready) .nav__in { visibility: hidden; }

/* -- plate 1: the two words -- */

/* They lie on the wood: words.js sets each letter along a ring, in a clearing
   the rings leave for it, and moves it with that ring (.is-laid). Until it
   has run, and without script, the words stand straight at the same places.
   The numbers follow computeLayout() in model.js. */
.title { position: absolute; inset: 0; }
.title__h {
  position: absolute;
  inset: 0;
  font-family: var(--font-display);
  font-weight: 300;
  /* one optical size at every distance: the letters keep their widths as the
     view moves in, and they are measured at the size they are drawn in */
  font-variation-settings: 'opsz' 72;
  font-variant-ligatures: none;
  font-kerning: normal;
  font-size: max(calc(var(--S) * 0.128), 17px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
}
.w {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: pre;
  letter-spacing: 0.022em;
}
.l1 { left: calc(var(--cx) - var(--S) * 0.09); top: calc(var(--cy) - var(--S) * 0.55); }
.l2 { left: calc(var(--cx) + var(--S) * 0.13); top: calc(var(--cy) + var(--S) * 0.83); }
[data-layout='wide'] .l1 { left: calc(var(--cx) - var(--S) * 0.25); top: calc(var(--cy) - var(--S) * 0.50); }
[data-layout='wide'] .l2 { left: calc(var(--cx) + var(--S) * 0.37); top: calc(var(--cy) + var(--S) * 0.76); }
/* over the css drawing there is no clearing: the ground gathers round the letters instead */
html:not(.js) .title__h,
.no-scene .title__h {
  text-shadow: 0 0 0.16em var(--black), 0 0 0.16em var(--black), 0 0 0.32em var(--black),
    0 0 0.32em var(--black), 0 0 0.5em var(--black), 0 0 0.5em var(--black);
}

.title__lines.is-laid .w {
  position: static;
  transform: none;
  letter-spacing: 0;
}
.title__lines.is-laid .g {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  white-space: pre;
  transform-origin: 0 0;
  opacity: 0;
}
/* the line the letters are measured on */
.title__meter {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  font-size: 100px;
}

/* -- plate 2: what the two have in common -- */

.statement {
  position: absolute;
  left: var(--m);
  right: var(--m);
  top: calc(var(--vh) * 17);
}
.statement__h {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.85rem, 8.2vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.028em;
}
.statement__h em { color: var(--muted); }
.ln { display: block; }
.statement__p {
  margin-top: 1.5rem;
  max-width: 29em;
  color: var(--muted);
  text-wrap: pretty;
}
[data-layout='wide'] .statement {
  top: 50%;
  right: auto;
  width: min(56vw, 48rem);
  transform: translateY(-54%);
}
[data-layout='wide'] .statement__h { font-size: clamp(2.2rem, min(4.3vw, calc(var(--vh) * 7.8)), 4.4rem); }
[data-layout='wide'] .statement__p { margin-top: 1.9rem; }

/* -- modes without the sticky stage: the statement is an ordinary block -- */
html:not(.is-motion) .plate--statement {
  height: auto;
  min-height: 0;
  padding: clamp(5rem, 13vw, 10rem) var(--m) 0;
}
html:not(.is-motion) .statement {
  position: static;
  width: min(100%, 48rem);
  transform: none;
}

/* ==========================================================================
   SKOG
   ========================================================================== */

.wood { margin: clamp(5rem, 11vw, 9.5rem) 0; }
.wood:not(.is-drawn) { display: none; }
.wood__svg {
  width: 100%;
  height: clamp(7rem, 13.5vw, 12rem);
}
.wood__svg path {
  fill: none;
  stroke: var(--fg);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.wood__cap {
  margin-top: 1.2rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.grid {
  display: grid;
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.item {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 1.5rem 0 2.8rem;
  border-top: 1px solid var(--rule);
}
.item__t {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.016em;
}
.item p { color: var(--muted); font-size: 0.98rem; text-wrap: pretty; max-width: 30em; }

/* ==========================================================================
   KLINISK KEMI — the same page turned to white
   ========================================================================== */

.rows {
  margin-top: clamp(4rem, 9vw, 7.5rem);
  border-top: 1px solid var(--rule);
}
.row {
  display: grid;
  gap: 0.8rem;
  padding: 1.6rem 0 1.9rem;
  border-bottom: 1px solid var(--rule);
}
.row__t {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.7rem, 3.3vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.026em;
}
.row p { color: var(--muted); text-wrap: pretty; max-width: 32em; }
@media (min-width: 56rem) {
  .row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.8rem, 4vw, 4rem);
    align-items: baseline;
    padding: 2.1rem 0 2.5rem;
  }
}

/* ==========================================================================
   OM
   ========================================================================== */

.om { padding-top: 0; }
.om__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
@media (min-width: 56rem) {
  .om__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.om__body { display: grid; gap: clamp(1.4rem, 2.4vw, 2.1rem); justify-items: start; }
.om__body .lead { max-width: 22em; }

.portrait { width: min(100%, 25rem); }
.portrait__frame {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--tint);
}

/* ==========================================================================
   KONTAKT + FOOTER
   ========================================================================== */

.kontakt { padding-bottom: clamp(5rem, 10vw, 9rem); }

.contact { display: grid; }
.contact__row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.contact__row:last-child { border-bottom: 1px solid var(--rule); }
.contact dt { font-size: 0.875rem; color: var(--muted); }
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
}
.contact__link .arr { transition: transform 0.6s var(--ease); }
.contact__link:hover .arr,
.contact__link:focus-visible .arr { transform: translateX(0.4rem); }

.foot {
  background: var(--bg);
  color: var(--fg);
  border-top: 1px solid var(--rule);
  padding: 1.8rem 0 calc(1.8rem + env(safe-area-inset-bottom));
}
.foot__in {
  display: grid;
  gap: 1.1rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--muted);
}
@media (min-width: 48rem) {
  .foot__in { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
}
.foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--fg);
}
.foot__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.8rem; }

/* ==========================================================================
   CURSOR — a small ring, the zero of Noll
   ========================================================================== */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.35s ease, width 0.45s var(--ease), height 0.45s var(--ease),
    margin 0.45s var(--ease), background-color 0.3s ease, border-color 0.3s ease;
}
.cursor.is-on { opacity: 1; }
.cursor.is-link {
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0);
}
@media not all and (hover: hover) and (pointer: fine) {
  .cursor { display: none; }
}

/* ==========================================================================
   Less motion, and print
   ========================================================================== */

.is-still .cursor { display: none; }
.is-still * { scroll-behavior: auto !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .nav, .cursor, .hero__art, .skip { display: none !important; }
  .hero { height: auto !important; }
  .hero__stage { position: static !important; height: auto !important; }
  .plate { position: static !important; height: auto !important; visibility: visible !important; }
  /* on paper the two words stand as two plain lines */
  .title, .title__h, .title__lines .w { position: static !important; transform: none !important; width: auto !important; height: auto !important; }
  .title__h { padding: 2rem var(--m); font-size: 2rem !important; line-height: 1.15; }
  .title__lines .w { display: block; }
  .title__lines .w__in { visibility: visible !important; }
  .title__lines .g { position: static !important; display: inline !important; transform: none !important; opacity: 1 !important; }
  .title__meter { display: none !important; }
}

/* ---- plain introduction (t5) ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.om .intro{max-width:34rem;margin:0 auto;padding-block:clamp(4rem,14vh,10rem)}
.om .intro p{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.55;margin:0 0 1.1em}
.om .intro p:last-child{margin-bottom:0}
.om .intro [id]{scroll-margin-top:6rem}

/* ---- contact button (t6) ---- */
.om .intro .intro__cta { margin-top: 2.2rem; }
.btn { display: inline-block; padding: 0.85em 1.6em; border: 1px solid currentColor; border-radius: 999px; font-size: 1rem; color: inherit; text-decoration: none; transition: background-color .3s, color .3s; }
.btn:hover, .btn:focus-visible { background: #111; color: #f4f4f4; }