/* Funnel Sans, served from this host like the rest of triwer.ltd (see
   input.css at the repo root). The delivered bundle names the family but
   loads no font file, so without these rules the pages fall back to Arial.
   No request leaves for a font CDN, which keeps the "no externally loaded
   fonts" statement in the Davide privacy policy true. */
@font-face{font-family:"Funnel Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/src/assets/fonts/funnel-sans-latin-ext.woff2") format("woff2");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:"Funnel Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url("/src/assets/fonts/funnel-sans-latin.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:"Funnel Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url("/src/assets/fonts/funnel-sans-italic-latin-ext.woff2") format("woff2");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:"Funnel Sans";font-style:italic;font-weight:300 800;font-display:swap;src:url("/src/assets/fonts/funnel-sans-italic-latin.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}
/* The Davide legal pages (Datenschutz, Nutzungsbedingungen, Impressum) are
   the delivered bundle; this stylesheet is ours and gives them the look of
   the rest of triwer.ltd (colours, type and the asymmetric corners of
   input.css). Keep it when a new delivery replaces the pages; the class names
   below are the ones the delivered markup uses. The project page next to
   them is generated by build/davide.mjs and uses /output.css instead. */

:root {
  --ink: #2d2b2f;
  --graphite: #252b37;
  --flame: #fd5a31;
  --flame-dark: #e84e28;
  --sand: #f5f4f2;
  --line: #e6e4e1;
  --rule: #d9d6d2;
  --muted: #696d77;
  --copy: #535862;
  --mist: #fafafa;
  --silver: #d1d2d5;
  --ash: #98969b;
  --davide: #fe7d53;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: "Funnel Sans", Arial, Helvetica, sans-serif;
  color: var(--graphite);
  /* Ink behind the page, sand on it: the rubber band past either end then
     continues the dark header and footer (see html in input.css). */
  background: var(--ink);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sand);
  font-size: 16px;
  line-height: 1.7;
}

::selection {
  background: var(--flame);
  color: #fff;
}

a {
  color: var(--graphite);
  text-underline-offset: 0.2em;
  transition: color 0.2s;
}

a:hover {
  color: var(--flame);
}

a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

p + p {
  margin-top: 1em;
}

.wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip {
  position: absolute;
  z-index: 200;
  left: 16px;
  top: -100px;
  padding: 10px 16px;
  border-radius: 10px 0 10px 0;
  background: #fff;
  color: var(--graphite);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.45);
  transition: top 0.3s var(--ease-out);
}

.skip:focus {
  top: 16px;
}

/* --------------------------------------------------------------- header */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 72px;
}

/* Davide's own wordmark: black-weight type, his coral dot. */
.wordmark {
  padding: 12px 0;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  text-decoration: none;
}

.wordmark:hover {
  color: #fff;
}

.dot {
  color: var(--davide);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nav-links a {
  position: relative;
  padding: 12px 0;
  color: var(--silver);
  text-decoration: none;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}

.nav-links a:hover {
  color: #fff;
}

.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------------------------------------------------------------- legal */

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flame);
}

.fine {
  font-size: 16px;
  line-height: 1.7;
  color: var(--copy);
}

.legal-hero {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.legal-hero .eyebrow {
  margin-bottom: 16px;
}

.legal-hero h1 {
  max-width: 900px;
  font-size: clamp(32px, 4.3vw, 54px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.legal-hero .fine {
  max-width: 640px;
  margin-top: 16px;
}

.legal-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 720px);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  padding-bottom: clamp(64px, 9vw, 112px);
}

/* The table of contents stays beside the text while it scrolls. */
.legal-nav {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-left: 14px;
  border-left: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.45;
}

.legal-nav a {
  position: relative;
  display: block;
  padding: 7px 0;
  color: var(--copy);
  text-decoration: none;
}

.legal-nav a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--flame);
  transform: scaleY(0);
  transition: transform 0.4s var(--ease-out);
}

.legal-nav a:hover {
  color: var(--flame);
}

.legal-nav a:hover::before {
  transform: scaleY(1);
}

.legal article {
  min-width: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--copy);
}

.legal-meta {
  display: inline-block;
  margin-bottom: 8px !important;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px 0 8px 0;
  background: #fff;
  font-size: 13px;
  color: var(--muted);
}

.legal article section {
  scroll-margin-top: 96px;
}

.legal article h2 {
  margin: 44px 0 14px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--graphite);
}

.legal article h3 {
  margin: 26px 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--graphite);
}

.legal article strong {
  color: var(--graphite);
}

.legal article ul,
.legal article ol {
  padding-left: 1.3rem;
}

.legal article li {
  margin: 0.5rem 0;
  padding-left: 0.2rem;
}

.legal article li::marker {
  color: var(--flame);
}

.legal article a {
  overflow-wrap: anywhere;
}

.address {
  width: fit-content;
  min-width: 280px;
  max-width: 100%;
  margin: 16px 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px 0 12px 0;
  background: #fff;
  font-style: normal;
  color: var(--graphite);
}

.legal table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
  line-height: 1.55;
}

.legal td,
.legal th {
  padding: 12px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.legal th {
  background: #efedea;
  color: var(--graphite);
  font-weight: 600;
}

.rights-note {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--flame);
  border-radius: 0 0 12px 0;
  background: #fff;
}

.rights-note h3 {
  margin-top: 0 !important;
}

.policy-list strong {
  color: var(--graphite);
}

.mobile-only {
  display: none;
}

/* --------------------------------------------------------------- footer */

.footer {
  padding: 56px 0 28px;
  background: var(--ink);
  color: var(--ash);
  font-size: 14px;
}

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}

.footer-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.footer p {
  margin-top: 6px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

.footer-links a {
  padding: 8px 0;
  color: var(--silver);
  text-decoration: none;
}

.footer-links a:hover {
  color: #fff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 13px;
}

/* ---------------------------------------------------------------- motion */

/* One quiet entrance, and the same page cross-fade as the rest of the site
   (both only without a reduced-motion preference). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .legal-hero > * {
    animation: rise 0.9s var(--ease-out) both;
  }

  .legal-hero > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .legal-hero > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .legal-grid {
    animation: rise 1s var(--ease-out) 0.22s both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-height: none;
    overflow: visible;
    padding: 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .legal-nav a {
    padding: 4px 0;
  }

  .legal-nav a::before {
    display: none;
  }

  .footer-top {
    display: block;
  }

  .footer-links {
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .nav {
    gap: 16px;
  }

  .nav-links {
    gap: 18px;
    font-size: 13.5px;
  }

  .footer-bottom {
    display: block;
  }

  .footer-bottom span {
    display: block;
    margin-top: 8px;
  }

  .legal table,
  .legal tbody,
  .legal tr,
  .legal td,
  .legal th {
    display: block;
  }

  .legal thead {
    display: none;
  }

  .legal tr {
    margin-bottom: 16px;
  }

  .legal td:first-child {
    background: #efedea;
    font-weight: 600;
    color: var(--graphite);
  }
}

@media print {
  .header,
  .footer,
  .legal-nav,
  .skip {
    display: none;
  }

  .legal-grid {
    display: block;
    animation: none;
  }

  .legal-hero > * {
    animation: none;
  }

  .wrap {
    padding: 0;
  }

  body,
  :root {
    background: #fff;
  }

  .legal article h2 {
    break-after: avoid;
  }

  a {
    color: #000;
  }

  .legal table,
  .legal td,
  .legal th {
    font-size: 10pt;
  }
}