/* Kuhlman mini — ported from the old Craft/Twig page.
 * The headline scaling is driven by Typetura (CSS-only fit-to-width via keyframe
 * animations whose progress is tied to container width). Ported from the old
 * assets/kuhlman/css/typetura.css + assets/kuhlman/css/kuhlman.css. */

/* --- Typetura v4.1.3 (CSS fit-to-width engine) --- */
@layer typetura {
  @property --property { syntax: "<integer>"; initial-value: 1; inherits: false; }
  @property --container { syntax: "<length>"; initial-value: 100vi; inherits: false; }
  @property --from { syntax: "<length>"; initial-value: 0px; inherits: true; }
  @property --to { syntax: "<length>"; initial-value: 0px; inherits: true; }

  * {
    --tt: 0;
    --on: unset;
    --container: var(--tt, 100cqi);
    animation-delay: var(--tt, calc(-1s * (var(--container) - var(--from)) / (var(--to) - var(--from))));
    animation-duration: var(--tt, calc(1s * var(--property)));
    animation-iteration-count: var(--tt, 1);
    animation-fill-mode: var(--tt, both);
    animation-play-state: var(--tt, paused);
  }

  @supports not (width: calc(1% / 1px * 1px)) {
    * {
      --CONTAINER: calc(tan(atan2(var(--container, 100vi), 1px)));
      --FROM: calc(tan(atan2(var(--from, 0rem), 1px)));
      --TO: calc(tan(atan2(var(--to, 60rem), 1px)));
      animation-delay: var(--tt, calc(-1s * var(--property) * (var(--CONTAINER) - var(--FROM)) / (var(--TO) - var(--FROM))));
    }
  }

  .tt, .rtt, .typetura, html { --tt: var(--on); }
  :where(html) { --from: 0rem; --to: 60rem; }
  :where(.rtt) { --container: 100vi; }
  :where(.cq) { container-type: inline-size; }
}

/* --- Page styling --- */
@layer page {
  :root {
    --beige-color: #F5E3C0;
    --lavender-color: #D89ABB;
    --red-color: #FFA289;
    --bg-color: #011018;
    --container-max-width: 90rem;
  }

  @font-face {
    font-family: "Kuhlman Web";
    src: url("Kuhlman.woff2") format("woff2");
    font-stretch: 50% 125%;
  }

  #kuhlman {
    background: var(--bg-color);
    padding: min(5.5vw, 3.5rem);
  }

  .heading {
    animation-name: heading;
    animation-timing-function: ease-in;
    --to: var(--container-max-width);
  }
  .heading-sm {
    animation-name: heading-sm;
    animation-timing-function: ease-in;
    --to: var(--container-max-width);
  }
  .heading-l {
    animation-name: heading-l;
    animation-timing-function: ease-in;
    --to: var(--container-max-width);
  }

  @keyframes heading {
    from { line-height: 0.94; font-size: 4rem; }
    to   { line-height: 0.92; font-size: 13rem; }
  }
  @keyframes heading-sm {
    from { line-height: 0.96; font-size: 3.7rem; }
    to   { line-height: 0.93; font-size: 10rem; }
  }
  @keyframes heading-l {
    from { line-height: 0.92; font-size: 4.2rem; }
    to   { line-height: 0.90; font-size: 16rem; }
  }

  #textblock {
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    color: #fff;
  }

  .heading, .heading-sm, .heading-l {
    font-family: "Kuhlman Web";
    line-height: 93%;
    margin-left: auto;
    margin-right: auto;
  }

  .red, .ftw:nth-child(3n) {
    color: var(--red-color);
    font-variation-settings: "SEED" 2;
  }
  .beige, .ftw:nth-child(3n + 1) {
    color: var(--beige-color);
    font-variation-settings: "SEED" 0;
  }
  .lavender, .ftw:nth-child(3n + 2) {
    color: var(--lavender-color);
    font-variation-settings: "SEED" 1;
  }

  .diagonals { font-feature-settings: "ss03"; }
  .track { letter-spacing: 0.015em; }

  #kuhlman a { text-decoration: none; color: inherit; }
  #kuhlman a:hover { color: white; }
  #buy a:hover { color: black; }

  .ftw2 {
    font-family: "Kuhlman Web";
    text-align: center;
  }

  #buy { text-align: center; }
  #buy .wrapper { max-width: var(--container-max-width); margin: 0 auto; }

  .try-buy-pdf { margin: 2rem; }
  .try-buy-pdf .button {
    background: inherit;
    color: white;
    border: none;
    letter-spacing: 0.15em;
    padding: 0.5em;
    font-family: "Kuhlman Web";
    cursor: pointer;
  }
}