/* /schleppseil.html (+ /en/tow-rope.html) — the DynStrenght tow rope.
   Loaded only on that page. Uses the shared tokens + .specsheet/.boxes from
   main.css; this file adds only the page hero + back-links row. */
@layer reset, base, components, utilities;

@layer components{

  /* Page hero — a clean heading line on a token surface. */
  .rope-hero{padding-block:clamp(20px,3vw,32px) clamp(32px,5vw,52px);background:var(--c-bg);color:var(--c-text)}
  .rope-hero__inner{max-width:760px}
  .rope-hero__eyebrow{margin:0 0 14px;color:var(--c-accent);font-size:13px;letter-spacing:.04em}
  .rope-hero h1{margin:0 0 14px;font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--c-text)}
  .rope-hero__intro{margin:0;color:var(--c-text-muted);font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6}

  /* Single detail photo — small centred figure, edges feathered so the hard
     crop line dissolves into the page background instead of showing a box. */
  .rope-photo{padding-block:0 clamp(20px,3vw,32px);background:var(--c-bg)}
  .rope-photo__figure{max-width:480px;margin:0 auto}
  .rope-photo__figure img{display:block;width:100%;height:auto;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
  .rope-photo__figure figcaption{padding:12px 16px 0;font-size:14px;color:var(--c-text-muted);line-height:1.45;text-align:center}

  /* Small note under the specsheet (price terms). */
  .rope-specs__note{margin:14px 0 0;color:var(--c-text-muted);font-size:13px}

  /* Price row — called out bigger, blinking between text-black and accent blue. */
  .rope-price{font-size:1.4em;font-weight:700;animation:rope-price-blink 2.8s ease-in-out infinite}
  @keyframes rope-price-blink{0%,49%{color:var(--c-text)}50%,100%{color:var(--c-accent)}}
  @media (prefers-reduced-motion:reduce){.rope-price{animation:none;color:var(--c-accent)}}

  /* Back-links row. */
  .rope-back{padding-block:clamp(36px,5vw,56px) clamp(52px,8vw,88px);background:var(--c-bg)}
  .rope-back__inner{max-width:760px}
  .rope-back p{margin:0;color:var(--c-text-muted);font-size:15.5px;line-height:1.7}
  .rope-back a{color:var(--c-accent);font-weight:600;text-decoration:none}
  .rope-back a:hover{text-decoration:underline}

}