/* Motivation Wave, served at /motivation-wave/. A tide chart on sand paper:
   one sea blue, Didone headings, and a wave that drives everything below it. */
.mw-page {
    --display-font: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --ui-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ink: #1f2c35;
    --sea: #2b6a8a;
    --sea-deep: #173f55;
    --sea-wash: #e4eef3;
    --deep-water: #173f55;
    --on-sea: #fff;
    --sand: #fbf8f1;
    --sand-high: #fdfbf6;
    --sand-edge: #e6dfcf;
    --surface: #fff;
    --chip: rgba(255, 255, 255, 0.6);
    --label: #6e6e6e;
    --dim: #9a9a9a;
    --dot-edge: #a9a9a9;
    --threshold: #d9d0bd;
    --figure-shadow: rgba(23, 63, 85, 0.45);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media screen {
    :root[data-theme="dark"] .mw-page {
        --ink: #e1e7ea;
        --sea: #6aaccb;
        --sea-deep: #a3cfe3;
        --sea-wash: #1d2d36;
        --deep-water: #1b4a63;
        --on-sea: #0d1e27;
        --sand: #1c1e1f;
        --sand-high: #212426;
        --sand-edge: #34393c;
        --surface: #1f2224;
        --chip: rgba(255, 255, 255, 0.04);
        --label: #9a9fa2;
        --dim: #6d7276;
        --dot-edge: #5e6468;
        --threshold: #4a5054;
        --figure-shadow: rgba(0, 0, 0, 0.7);
    }
}
.mw-page > :nth-child(-n+4) { animation: mw-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.mw-page > :nth-child(2) { animation-delay: 0.06s; }
.mw-page > :nth-child(3) { animation-delay: 0.14s; }
.mw-page > :nth-child(4) { animation-delay: 0.22s; }
@keyframes mw-rise { from { opacity: 0; transform: translateY(10px); } }

.mw-label {
    display: block; font-family: var(--ui-font); font-size: 0.64rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}

/* The one sentence, set like a pull quote with a hanging mark. */
.article-content blockquote.mw-principle {
    position: relative; margin: 1rem 0 0.9rem; padding: 0; border: 0;
    font-family: var(--display-font); font-style: normal; font-weight: 400;
    font-size: 2.25rem; line-height: 1.16; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}
.article-content blockquote.mw-principle::before {
    content: "“"; position: absolute; left: -0.62em; top: -0.12em;
    font-size: 1.9em; line-height: 1; color: var(--sea); opacity: 0.85;
}
.article-content blockquote.mw-principle p { margin: 0; }
.mw-credit { margin: 0 0 2.5rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.mw-credit a { color: var(--sea-deep); }

/* The figure. Wider than the text column on large screens. */
.mw-figure {
    position: relative; isolation: isolate;
    margin: 0 0 3rem; padding: 1.5rem 1.75rem 1.3rem;
    background: var(--grain), linear-gradient(180deg, var(--sand-high), var(--sand));
    border: 1px solid var(--sand-edge); border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 30px 50px -36px var(--figure-shadow);
}
@media (min-width: 1100px) {
    .mw-figure { margin-left: -6rem; margin-right: -6rem; padding: 1.75rem 2.25rem 1.5rem; }
}
.mw-wave-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.mw-play {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--ui-font); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.4rem 0.8rem 0.4rem 0.65rem; color: var(--sea-deep); background: var(--chip);
    border: 1px solid var(--sand-edge); border-radius: 999px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.mw-play::before {
    content: ""; width: 0; height: 0; border-style: solid; border-width: 4.5px 0 4.5px 7px;
    border-color: transparent transparent transparent currentColor;
}
.mw-play[aria-pressed="true"]::before { width: 7px; height: 9px; border: 0; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%); }
.mw-play:hover { border-color: var(--sea); }
.mw-play[aria-pressed="true"] { background: var(--deep-water); border-color: var(--deep-water); color: #fff; }
.mw-play:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }

.mw-wave-plot { position: relative; height: 220px; }
.mw-wave-svg {
    display: block; width: 100%; height: 100%; overflow: visible;
    animation: mw-draw 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.25s both;
}
@keyframes mw-draw { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% 0 -10% 0); } }
.mw-stop-top { stop-color: var(--sea); stop-opacity: 0.34; }
.mw-stop-bottom { stop-color: var(--sea); stop-opacity: 0.02; }
.mw-band-high, .mw-band-low { fill: var(--sea-wash); opacity: 0; transition: opacity 0.35s; }
.mw-figure[data-zone="high"] .mw-band-high, .mw-figure[data-zone="low"] .mw-band-low { opacity: 0.75; }
.mw-threshold { stroke: var(--threshold); stroke-width: 1; stroke-dasharray: 2 5; }
.mw-swell { fill: none; stroke: var(--sea); stroke-width: 1; opacity: 0.16; }
.mw-wave-line { fill: none; stroke: var(--sea-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mw-band-tag {
    position: absolute; right: 0; transform: translateY(-140%);
    font-family: var(--display-font); font-style: italic; font-size: 0.95rem;
    color: var(--faint); pointer-events: none; transition: color 0.3s;
}
.mw-band-tag.is-low { transform: translateY(15%); }
.mw-figure[data-zone="high"] .mw-band-tag.is-high, .mw-figure[data-zone="low"] .mw-band-tag.is-low { color: var(--sea-deep); }
.mw-marker {
    position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
    background: var(--surface); border: 3px solid var(--sea-deep); pointer-events: none;
    box-shadow: 0 0 0 6px rgba(43, 106, 138, 0.14), 0 3px 8px rgba(0, 0, 0, 0.18);
    animation: mw-fade 0.4s ease-out 1.9s both;
}
.mw-marker::before {
    content: ""; position: absolute; left: 50%; top: 12px; width: 1px; height: 230px; margin-left: -0.5px;
    background: linear-gradient(var(--sea-deep), transparent 85%); opacity: 0.4;
}
.mw-marker::after {
    content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid var(--sea);
    animation: mw-ping 2.4s ease-out 2.4s infinite;
}
.mw-figure.is-still .mw-marker::after { animation: none; opacity: 0; }
@keyframes mw-fade { from { opacity: 0; transform: scale(0.4); } }
@keyframes mw-ping { 0% { transform: scale(0.6); opacity: 0.6; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.mw-figure.is-focused .mw-marker { box-shadow: 0 0 0 6px rgba(43, 106, 138, 0.3), 0 0 0 8px var(--sea); }
.mw-scrub {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.mw-wave-foot {
    display: flex; justify-content: space-between; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px solid var(--ink);
    font-family: var(--ui-font); font-size: 0.64rem; letter-spacing: 0.06em; color: var(--label);
}

.mw-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem;
    margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--sand-edge);
}
.mw-model-svg { display: block; width: 100%; height: auto; margin-top: 0.5rem; overflow: visible; }
.mw-axis { stroke: var(--ink); stroke-width: 1; }
.mw-axis-text { font-family: var(--ui-font); font-size: 10px; fill: var(--label); }
.mw-axis-title { font-family: var(--ui-font); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--label); }
.mw-zone-text { font-family: var(--display-font); font-style: italic; font-size: 12px; fill: var(--faint); }
.mw-action-line { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }
.mw-action-text { font-family: var(--display-font); font-style: italic; font-size: 14px; fill: var(--ink); }
.mw-tide-fill { fill: var(--sea); opacity: 0.11; }
.mw-tide-line { stroke: var(--sea); stroke-width: 1.5; stroke-dasharray: 5 4; }
.mw-dot circle {
    fill: var(--sand); stroke: var(--dot-edge); stroke-width: 1;
    transform-box: fill-box; transform-origin: center;
    transition: fill 0.25s, stroke 0.25s, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.mw-dot text { font-family: var(--ui-font); font-size: 9px; font-weight: 700; fill: var(--label); transition: fill 0.2s; }
.mw-dot.is-doable circle { fill: var(--sea); stroke: var(--sea-deep); transform: scale(1.15); }
.mw-dot.is-doable text { fill: var(--on-sea); }

.article-content .mw-ladder { list-style: none; margin: 0.5rem 0 0; padding: 0; counter-reset: rung; }
.article-content .mw-rung {
    counter-increment: rung; position: relative; isolation: isolate; display: flex; align-items: center; gap: 0.65rem;
    margin: 0; padding: 0.3rem 0.4rem; font-size: 0.93rem; line-height: 1.35; color: var(--dim);
    border-radius: 4px; transition: color 0.25s;
}
.mw-rung::after {
    content: ""; position: absolute; inset: 1px 0; z-index: -1; border-radius: 4px;
    background: linear-gradient(90deg, var(--sea-wash), transparent);
    transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mw-rung-dot {
    flex: 0 0 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border-radius: 50%;
    border: 1px solid var(--sand-edge); background: var(--surface); font-family: var(--ui-font); font-size: 0.62rem; font-weight: 700; color: var(--label);
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.mw-rung-dot::before { content: counter(rung); }
.mw-rung.is-doable { color: var(--ink); }
.mw-rung.is-doable::after { transform: scaleX(1); }
.mw-rung.is-doable .mw-rung-dot { background: var(--sea); border-color: var(--sea); color: var(--on-sea); }

.mw-status {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--sand-edge);
    font-family: var(--display-font); font-size: 1.2rem; line-height: 1.4; color: var(--ink); min-height: 3.6em;
}

/* Peak and trough playbooks. The one that matches the wave turns to deep water. */
.mw-plays { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0 0 3.5rem; }
.mw-play-card {
    position: relative; overflow: hidden;
    padding: 1.35rem 1.4rem 1.2rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface);
    transition: background 0.45s, border-color 0.45s, box-shadow 0.45s, color 0.45s, transform 0.45s;
}
.mw-play-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: var(--grain), radial-gradient(120% 80% at 100% 0%, rgba(120, 180, 205, 0.35), transparent 60%);
    opacity: 0; transition: opacity 0.45s;
}
.mw-play-card > * { position: relative; z-index: 1; }
.mw-play-card.is-active {
    background: var(--deep-water); border-color: var(--deep-water); color: #dce8ee;
    box-shadow: 0 24px 40px -26px rgba(23, 63, 85, 0.7); transform: translateY(-3px);
}
.mw-play-card.is-active::before { opacity: 1; }
.mw-play-head { display: flex; align-items: center; gap: 0.75rem; }
.mw-glyph { width: 2.6rem; height: 1.1rem; flex: none; fill: none; stroke: var(--sea); stroke-width: 2.5; stroke-linecap: round; overflow: visible; transition: stroke 0.45s; }
.article-content .mw-play-head h2 { margin: 0; font-family: var(--display-font); font-weight: 600; font-size: 1.65rem; line-height: 1.15; color: var(--ink); transition: color 0.45s; }
.article-content .mw-play-lead { margin: 0.55rem 0 1rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); transition: color 0.45s; }
.article-content .mw-play-list { list-style: none; margin: 0; padding: 0; counter-reset: play; }
.article-content .mw-play-list li {
    counter-increment: play; position: relative; display: flex; flex-direction: column; gap: 0.15rem;
    margin: 0; padding: 0.75rem 0 0.75rem 2.1rem; border-top: 1px solid var(--border-color); transition: border-color 0.45s;
}
.mw-play-list li::before {
    content: counter(play); position: absolute; left: 0; top: 0.45rem;
    font-family: var(--display-font); font-size: 1.7rem; line-height: 1; color: var(--sea); transition: color 0.45s;
}
.mw-play-name { font-family: var(--ui-font); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); transition: color 0.45s; }
.mw-play-do { font-size: 0.95rem; line-height: 1.45; }
.mw-play-example { font-size: 0.88rem; line-height: 1.45; font-style: italic; color: var(--muted); transition: color 0.45s; }
.article-content .mw-play-avoid {
    margin: 0.35rem 0 0; padding: 0.8rem 0.9rem; border-radius: 5px; background: var(--sand);
    font-size: 0.88rem; line-height: 1.45; color: var(--muted); transition: background 0.45s, color 0.45s;
}
.mw-play-card.is-active .mw-glyph { stroke: #9cc8dc; }
.mw-play-card.is-active h2, .mw-play-card.is-active .mw-play-lead, .mw-play-card.is-active .mw-play-name { color: #fff; }
.mw-play-card.is-active .mw-play-list li { border-color: rgba(255, 255, 255, 0.14); }
.mw-play-card.is-active .mw-play-list li::before { color: #9cc8dc; }
.mw-play-card.is-active .mw-play-example { color: #a9c3cf; }
.mw-play-card.is-active .mw-play-avoid { background: rgba(255, 255, 255, 0.08); color: #c8dbe3; }

/* Reference sections. */
.mw-section { margin: 0 0 3rem; }
.article-content .mw-section h2 { margin: 0 0 0.35rem; font-family: var(--display-font); font-weight: 500; font-size: 1.85rem; color: var(--ink); }
.article-content .mw-section-lead { margin: 0 0 1.1rem; color: var(--muted); }

.article-content .mw-kinds, .article-content .mw-rules { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.article-content .mw-kinds li, .article-content .mw-rules li {
    counter-increment: item; display: grid; grid-template-columns: 2.4rem minmax(0, 12.5rem) minmax(0, 1fr); column-gap: 1rem;
    align-items: baseline; margin: 0; padding: 0.8rem 0; border-top: 1px solid var(--border-color);
}
.article-content .mw-kinds li:last-child, .article-content .mw-rules li:last-child { border-bottom: 1px solid var(--border-color); }
.mw-kinds li::before, .mw-rules li::before {
    content: counter(item); font-family: var(--display-font); font-size: 1.8rem; line-height: 1; color: var(--sea);
}
.mw-kind-name, .mw-rule-name { font-weight: bold; color: var(--ink); line-height: 1.35; }
.mw-kind-note, .mw-rule-note { font-size: 0.95rem; line-height: 1.5; }

/* The failure loop, drawn as a loop. */
.mw-ring {
    --size: 30rem; --r: 11.4rem;
    position: relative; width: var(--size); height: var(--size); max-width: 100%; margin: 0.5rem auto 1rem;
}
.mw-ring-track { position: absolute; inset: 0; width: 100%; height: 100%; }
.mw-ring-track circle {
    fill: none; stroke: var(--sand-edge); stroke-width: 0.5; stroke-dasharray: 1 1.6;
    animation: mw-orbit 30s linear infinite;
}
@keyframes mw-orbit { to { stroke-dashoffset: -26; } }
.mw-ring-arrow {
    position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: rotate(calc((var(--i) + 0.5) * 360deg / var(--n) - 90deg)) translateX(var(--r));
}
.mw-ring-arrow::before {
    content: ""; position: absolute; left: -5px; top: -5px; width: 7px; height: 7px;
    border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint);
    transform: rotate(45deg);
}
.mw-ring-center {
    position: absolute; left: 50%; top: 50%; width: 11rem; margin: 0; transform: translate(-50%, -50%);
    font-family: var(--display-font); font-style: italic; font-size: 1.15rem; line-height: 1.3; text-align: center; color: var(--muted);
}
.article-content .mw-loop { list-style: none; margin: 0; padding: 0; }
.article-content .mw-loop li {
    position: absolute; left: 50%; top: 50%; width: 9.5rem; margin: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 360deg / var(--n) - 90deg)) translateX(var(--r)) rotate(calc(90deg - var(--i) * 360deg / var(--n)));
    padding: 0.55rem 0.75rem; text-align: center;
    font-family: var(--ui-font); font-size: 0.8rem; line-height: 1.3; color: var(--ink);
    background: var(--sand); border: 1px solid var(--sand-edge); border-radius: 10px;
    box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.3);
}
.article-content .mw-loop li:last-child { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.article-content .mw-loop-note { margin: 0; font-size: 0.95rem; color: var(--muted); }

@media (max-width: 720px) {
    .article-content blockquote.mw-principle { font-size: 1.7rem; }
    .article-content blockquote.mw-principle::before { position: static; display: block; height: 0.55em; font-size: 1.6em; }
    .mw-figure { padding: 1.1rem 1rem 1rem; margin-left: -0.5rem; margin-right: -0.5rem; }
    .mw-wave-plot { height: 160px; }
    .mw-marker::before { height: 160px; }
    .mw-split { grid-template-columns: 1fr; gap: 1.1rem; }
    .mw-status { font-size: 1.08rem; }
    .mw-plays { grid-template-columns: 1fr; }
    .article-content .mw-kinds li, .article-content .mw-rules li { grid-template-columns: 2rem minmax(0, 1fr); }
    .mw-kind-note, .mw-rule-note { grid-column: 2; margin-top: 0.2rem; }
}
@media (max-width: 560px) {
    .mw-ring { width: auto; height: auto; margin: 0.5rem 0 1rem; }
    .mw-ring-track, .mw-ring-arrow, .mw-ring-center { display: none; }
    .article-content .mw-loop { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
    .article-content .mw-loop li { position: relative; left: auto; top: auto; width: auto; transform: none; text-align: left; }
    .article-content .mw-loop li + li::before {
        content: "↓"; position: absolute; left: 1rem; top: -1.35rem; color: var(--faint); font-size: 0.9rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .mw-page > :nth-child(-n+4), .mw-wave-svg, .mw-marker, .mw-marker::after, .mw-ring-track circle { animation: none; }
}
@media print {
    .home-navigation, .site-footer, .mw-play, .mw-wave-foot { display: none !important; }
    .mw-page > *, .mw-wave-svg, .mw-marker { animation: none !important; }
    .mw-figure, .mw-play-card, .mw-section { break-inside: avoid; }
}