@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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: "Archivo"; src: url("fonts/archivo-latin-ext-standard-normal.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-standard-normal.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; 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: "Instrument Sans"; src: url("fonts/instrument-sans-latin-ext-standard-normal.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root { --peat: #14110E; --humus: #2A241C; --limestone: #F3EEE6; --ochre: #C8893A; --ochre-light: #E0B36A; --ash: #8A8176; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body.teaser {
  margin: 0; min-height: 100svh; display: grid; grid-template-rows: 1fr auto;
  background: radial-gradient(ellipse at 50% 45%, #1B1713 0%, var(--peat) 60%);
  background-color: var(--peat);
  color: var(--limestone);
  font: 400 1rem/1.5 "Instrument Sans", system-ui, sans-serif;
}
main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
h1 { margin: 0; font-size: inherit; }
.mark { display: block; width: min(30rem, 84vw); height: auto; overflow: visible; }

.line {
  margin: 2.75rem 0 0; text-align: center;
  font-family: "Archivo", sans-serif; font-stretch: 90%; font-weight: 500;
  font-size: clamp(1rem, 2.4vw, 1.375rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ash);
}

footer { display: flex; justify-content: center; gap: 1.5rem; padding: 0 1rem 1.75rem; font-size: 0.75rem; letter-spacing: 0.06em; }
footer a { color: var(--ash); text-decoration: none; opacity: 0.7; }
footer a:hover, footer a:focus-visible { opacity: 1; color: var(--limestone); }
footer a:focus-visible { outline: 1px solid var(--ochre); outline-offset: 4px; }

.trail { fill: var(--limestone); }
.t1 { fill: var(--ochre); }

@media (prefers-reduced-motion: no-preference) {
  main { animation: cycle 17.4s linear infinite; }
  .square { opacity: 0; animation: square 17.4s infinite; }
  .draw { stroke-dasharray: 100 120; stroke-dashoffset: 100; fill-opacity: 0; animation: 17.4s infinite; }
  .d0 { animation-name: draw-d0; }
  .d2 { animation-name: draw-d2; }
  .d1 { animation-name: draw-d1; }
  .t1 { fill: var(--limestone); animation: knot 17.4s ease-in-out infinite; }
  .will { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); animation: will 17.4s infinite; }
  .word { opacity: 0; animation: word 17.4s infinite; }
  .line { opacity: 0; animation: line 17.4s infinite; }
  footer { opacity: 0; animation: fade 2s ease-out 10s forwards; }
}
@keyframes cycle { 0%, 93.10% { opacity: 1; animation-timing-function: ease-in-out; } 100% { opacity: 0; } }
@keyframes square { 0%, 1.72% { opacity: 0; animation-timing-function: ease-out; } 10.92%, 100% { opacity: 1; } }
@keyframes draw-d0 { 0%, 6.90% { stroke-dashoffset: 100; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 18.62% { stroke-dashoffset: 40; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 26.44%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes draw-d2 { 0%, 10.92% { stroke-dashoffset: 100; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 22.64% { stroke-dashoffset: 40; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 30.46%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes draw-d1 { 0%, 14.94% { stroke-dashoffset: 100; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 26.67% { stroke-dashoffset: 40; fill-opacity: 0; animation-timing-function: cubic-bezier(.45,0,.2,1); } 34.48%, 100% { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes knot { 0%, 31.03% { fill: var(--limestone); } 43.68%, 64.37% { fill: var(--ochre); } 78.74% { fill: var(--ochre-light); } 93.10%, 100% { fill: var(--ochre); } }
@keyframes will { 0%, 29.89% { opacity: 0; transform: scale(0.2); animation-timing-function: cubic-bezier(.2,.7,.2,1); } 37.93%, 100% { opacity: 1; transform: scale(1); } }
@keyframes word { 0%, 39.08% { opacity: 0; animation-timing-function: ease-out; } 52.87%, 100% { opacity: 1; } }
@keyframes line { 0%, 49.43% { opacity: 0; letter-spacing: 0.24em; animation-timing-function: ease-out; } 64.37%, 100% { opacity: 1; letter-spacing: 0.14em; } }
@keyframes fade { to { opacity: 1; } }