/* The guides: quiet reading pages for the blog. One column of about 65 characters, the ribbed sky-blue band only
   at the top, short sections, and room for Jakob's clips and the technique animation. Built on felles.css. */
.art-top { position: relative; isolation: isolate; color: var(--white);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 11px, rgba(3, 60, 90, 0.1) 11px 13px),
    linear-gradient(180deg, #19A6DA 0%, #0593C6 55%, #04739E 100%); }
.art-top .wrap { display: grid; gap: 14px; padding-block: calc(env(safe-area-inset-top, 0px) + 18px) 36px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.875rem; }
.crumbs a { text-decoration: none; opacity: 0.92; }
.crumbs img { width: 32px; height: 32px; }
.art-top h1 { font-size: clamp(2.1rem, 8.5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 17ch; }
.art-top .lede { font-size: 1.125rem; max-width: 34rem; }
.byline { font-size: 0.875rem; opacity: 0.92; }

article .wrap { max-width: calc(40rem + 32px); padding-block: 32px 24px; display: grid; gap: 16px; }
article h2 { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; margin-top: 20px; }
article p, article li { max-width: 65ch; }
article ul, article ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }

/* the short version at the top of each guide */
.short { padding: 18px; border-radius: var(--radius); background: var(--sky-tint); }
.short b { display: block; margin-bottom: 8px; }

/* numbers on small footballs: white with faint panels, the number clear on top (Markus, round 3) */
:root { --ball: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3CclipPath id='b'%3E%3Ccircle cx='16' cy='16' r='15'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='15' fill='%23FCFFFF'/%3E%3Cg clip-path='url%28%23b%29' fill='%2308202C' fill-opacity='.11'%3E%3Cpolygon points='16.00,10.60 21.14,14.33 19.17,20.37 12.83,20.37 10.86,14.33'/%3E%3Cpolygon points='16.00,5.80 10.86,2.07 12.83,-3.97 19.17,-3.97 21.14,2.07'/%3E%3Cpolygon points='25.70,12.85 27.66,6.81 34.01,6.81 35.97,12.85 30.84,16.58'/%3E%3Cpolygon points='22.00,24.25 28.34,24.25 30.31,30.29 25.17,34.02 20.03,30.29'/%3E%3Cpolygon points='10.00,24.25 11.97,30.29 6.83,34.02 1.69,30.29 3.66,24.25'/%3E%3Cpolygon points='6.30,12.85 1.16,16.58 -3.97,12.85 -2.01,6.81 4.34,6.81'/%3E%3C/g%3E%3Cg clip-path='url%28%23b%29' stroke='%2308202C' stroke-opacity='.16' stroke-width='.9'%3E%3Cline x1='16.00' y1='10.60' x2='16.00' y2='5.40'/%3E%3Cline x1='21.14' y1='14.33' x2='26.08' y2='12.72'/%3E%3Cline x1='19.17' y1='20.37' x2='22.23' y2='24.58'/%3E%3Cline x1='12.83' y1='20.37' x2='9.77' y2='24.58'/%3E%3Cline x1='10.86' y1='14.33' x2='5.92' y2='12.72'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='14.5' fill='none' stroke='%2308202C' stroke-opacity='.22'/%3E%3C/svg%3E"); }

/* a real sequence: numbers carry the order */
.steps { list-style: none; padding: 0 !important; counter-reset: step; gap: 14px !important; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ball) center / 100% no-repeat; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--white), 0 0 3px var(--white); box-shadow: 0 2px 6px -2px rgba(8, 32, 44, 0.25); }
.steps b { display: block; font-size: 1.0625rem; }
.steps span { color: var(--ink-2); }

/* icon rows: a cue and why it works, short enough to read in a glance */
.cues { list-style: none; padding: 0 !important; gap: 12px !important; }
.cues li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.cues .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--sky-tint); color: var(--sky-ink); }
.cues b { display: block; font-size: 1.0625rem; }
.cues span { color: var(--ink-2); }

/* pictures, clips and the animation */
.media { margin: 6px 0; display: grid; gap: 8px; }
.media img, .media video, .media canvas { width: 100%; height: auto; border-radius: 18px; display: block; }
.media figcaption { font-size: 0.875rem; color: var(--ink-2); }
/* a clip filmed standing stays standing */
.media.portrait { justify-items: center; }
.media.portrait video, .media.portrait img { width: min(100%, 20rem); aspect-ratio: 9 / 16; object-fit: cover; }
.media.portrait figcaption { text-align: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.pair figure { margin: 0; display: grid; gap: 6px; }
.pair img { width: 100%; height: auto; aspect-ratio: 720 / 590; object-fit: cover; border-radius: 14px; }
.pair figcaption { font-weight: 600; color: var(--ink); }
.pair.tall img { aspect-ratio: 480 / 690; }
.pair.tall figcaption { font-weight: 400; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.35; }
.pair.tall figcaption b { display: block; color: var(--ink); font-weight: 700; }
.slot { display: grid; place-items: center; gap: 4px; min-height: 180px; padding: 18px; border: 1.5px dashed var(--sky); border-radius: 18px;
  background: var(--sky-tint); color: var(--sky-ink); text-align: center; font-weight: 600; }
.slot small { color: var(--ink-2); font-weight: 400; max-width: 32ch; }
.replay { position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 18px; overflow: hidden; background: var(--sky); }
.replay canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }

/* the nine zones on a goal shaped like a real one (7.32 x 2.44 m), centred, seen from behind */
.keypad { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: min(84%, 26rem); aspect-ratio: 3 / 1; margin: 10px auto 14px; border: 5px solid var(--ink); border-bottom: 0;
  border-radius: 4px 4px 0 0; background: var(--sky-tint); }
.keypad::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 2px; background: rgba(8, 32, 44, 0.35); }
.keypad span { display: grid; place-items: center; border-right: 1px dashed rgba(8, 32, 44, 0.25); border-bottom: 1px dashed rgba(8, 32, 44, 0.25);
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.keypad span:nth-child(3n) { border-right: 0; }
.keypad span:nth-child(n+7) { border-bottom: 0; }
.keypad span.top { background: rgba(216, 57, 149, 0.16); color: var(--pink-press); }

/* the short version: a few words each, the detail behind a tap */
.short-list { list-style: none; padding: 0 !important; counter-reset: short; gap: 0 !important; }
.short-list li { counter-increment: short; }
.short-list summary { display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-weight: 600; list-style: none; }
.short-list summary::-webkit-details-marker { display: none; }
.short-list summary::before { content: counter(short); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ball) center / 100% no-repeat; color: var(--ink); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--white), 0 0 3px var(--white); box-shadow: 0 2px 6px -2px rgba(8, 32, 44, 0.25); }
.short-list summary::after { content: "+"; justify-self: end; color: var(--sky-ink); font-size: 1.25rem; font-weight: 500; }
.short-list details[open] summary::after { content: "\2013"; }
.short-list p { margin: 0 0 10px 40px; color: var(--ink-2); font-size: 0.9375rem; }
.short-list a { color: var(--sky-ink); font-weight: 600; }

/* questions and answers, closed until tapped; the same text is in the FAQPage data in the head */
.faq { display: grid; margin-top: 8px; }
.faq h2 { margin-bottom: 6px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding-block: 12px;
  cursor: pointer; font-weight: 600; font-size: 1.0625rem; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--sky-ink); font-size: 1.375rem; font-weight: 500; }
.faq details[open] summary::after { content: "\2013"; }
.faq p { margin: 0 0 14px; color: var(--ink-2); }

/* the drill: glass over pink and blue light, like Next session on the landing page */
.drill { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 18px; color: var(--white);
  background: linear-gradient(160deg, #19A6DA, #0593C6 55%, #046E96); }
.drill::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 90%; right: -15%; bottom: -30%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 57, 149, 0.9), rgba(255, 120, 110, 0.45) 60%, transparent); filter: blur(10px); }
.drill-glass { display: grid; gap: 10px; padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.3); }
.drill-glass p:first-child { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.drill-glass b { font-size: 1.25rem; line-height: 1.2; }

.cta-box { display: grid; gap: 14px; margin-top: 18px; padding: 20px; border-radius: var(--radius); background: var(--sky-tint); color: var(--ink); }
.cta-box h2 { margin: 0; }
.note { font-size: 0.875rem; color: var(--ink-2); }
.sources { font-size: 0.8125rem; color: var(--ink-2); }
.sources a { word-break: break-word; }