/* Header (arc): cream band with a circular-arc bottom edge and a large logo. main.js (header.js) sets --hp from 0 (top of page)
   to 1 (scrolled 140px) on desktop; the arc flattens into the header line and the logo shrinks into the flat bar.
   The arc and the large logo are drawn outside the bar, so the page layout never shifts. Below 1100px there is
   no arc: it behaves like the flat header. */
.cc-header--arc { --hp: 0; box-shadow: none; }
.cc-header--arc::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--wp--preset--color--line); opacity: 1; pointer-events: none; }
.cc-header__curve { display: none; }
@media (min-width: 1100px) {
  .cc-header--arc::after { opacity: var(--hp); }
  .cc-header--arc .cc-header__inner { grid-template-columns: 1fr 14rem 1fr; }
  .cc-header--arc .cc-header__left { grid-column: 1; }
  .cc-header--arc .cc-header__right { grid-column: 3; }
  .cc-header__curve { display: block; position: absolute; top: 100%; left: 0; right: 0; width: auto; max-width: none !important; height: 44px; margin: 0 !important; transform-origin: top center; transform: scaleY(calc(1 - var(--hp))); pointer-events: none; }
  .cc-header__curve svg { display: block; width: 100%; height: 100%; }
  .cc-curve__fill { fill: var(--wp--preset--color--parchment); }
  .cc-curve__edge { fill: none; stroke: var(--wp--preset--color--line); stroke-width: 1; }
  .cc-header--arc .cc-logo { position: absolute; left: 50%; top: calc(22px - 2px * var(--hp)); width: 236px; transform-origin: top center; transform: translateX(-50%) scale(calc(1 - 0.407 * var(--hp))); z-index: 3; }
  .cc-header--arc .cc-logo img { width: 100%; height: auto; }
}