/* The how-it-works explainer and the line on why the site exists (templates/_explainer.html, on the home page
   and /about), and the About page's six facts. Loaded on those two pages only. Everything takes style.css's
   colours and type (--ink, --card, --dot and the rest), so it follows every theme. */

/* ---------- the explainer: a white card like the featured tile, the drawing on the left, the chapters on
   the right ---------- */
.ex {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px 36px;
  margin-top: 36px; padding: 14px 16px 16px; background: var(--card);
}
.ad + .ex, .ex + .cta-strip { margin-top: var(--gap); }  /* the home page: the ad, this, then the upload strip */
.ex .card-top { grid-column: 1 / -1; align-items: center; }
.ex-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--dot); vertical-align: 1px; }
.ex-pause {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--ink-2);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ex-pause::before {  /* two bars, or a triangle once paused */
  content: ""; width: 7px; height: 8px; background: linear-gradient(90deg, currentColor 35%, transparent 35% 65%, currentColor 65%);
}
.ex-pause.held::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ex-pause:hover { color: var(--ink); }
.ex-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--page); }
.ex-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; fill: var(--ink); font-family: var(--font); }

.ex-text { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; }
.ex-head { margin: 0; font: 600 clamp(34px, 4.2vw, 72px)/0.92 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.ex-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ex-step { position: relative; border-bottom: 1px solid var(--line); }
.ex-step button {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 11px 0 10px; border: 0; background: none;
  color: var(--ink-2); font: 600 clamp(17px, 1.5vw, 22px)/1.1 var(--font-display); letter-spacing: -0.03em; text-align: left;
  transition: color 0.2s;
}
.ex-num { flex: none; width: 22px; font: 500 10px var(--font); letter-spacing: 0.06em; }
.ex-step button:hover, .ex-step.on button { color: var(--ink); }
.ex-step p { max-width: 46ch; margin: -2px 0 14px 34px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.ex.js .ex-step:not(.on) p { display: none; }  /* without about.js every chapter's words show */
.ex-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; }
.ex-bar span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
/* As long as its scene: about.js moves on when it ends. Longhands, so the durations below still apply. */
.ex.js .ex-step.on .ex-bar span { animation-name: ex-progress; animation-timing-function: linear; animation-fill-mode: both; }
.ex-step:nth-child(1) .ex-bar span { animation-duration: 6.5s; }
.ex-step:nth-child(2) .ex-bar span { animation-duration: 5.5s; }
.ex-step:nth-child(3) .ex-bar span { animation-duration: 6s; }
.ex-step:nth-child(4) .ex-bar span { animation-duration: 5.5s; }
.ex-step:nth-child(5) .ex-bar span { animation-duration: 5.5s; }
@keyframes ex-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ex.paused, .ex.paused * { animation-play-state: paused !important; }

/* ---------- the drawing's parts ---------- */
.ex-lab { font-size: 9px; font-weight: 500; letter-spacing: 0.06em; fill: var(--ink-2); }
.ex-dark { fill: var(--ink); }
.ex-val { font-size: 12px; }
.ex-small { font-size: 11px; }
.ex-name { font: 600 12px var(--font-display); letter-spacing: -0.01em; }
.ex-by { font-size: 10px; fill: var(--ink-3); }
.ex-mono { font: 12.5px var(--mono); }
.ex-month { font: 600 30px var(--font-display); letter-spacing: -0.04em; }
.ex-end { text-anchor: end; }
.ex-mid { text-anchor: middle; }
.ex-paper { fill: var(--card); }
.ex-tile { fill: var(--page); }
.ex-ink { fill: var(--ink); }
.ex-off { fill: var(--line); }
.ex-ball { fill: var(--dot); }
.ex-rule { stroke: var(--line); }
.ex-axis { stroke: var(--ink); }
.ex-underline { stroke: var(--ink); }
.ex-arrow { fill: none; stroke: var(--card); stroke-width: 1.6; }
.ex-lead { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1; }  /* pathLength="1": drawn by dashoffset */
.ex-arc-head, .ex-back-head { stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; }
.ex-glyph { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.ex-box { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ex-pend line { stroke: var(--ink-3); stroke-width: 1; }
.ex-dots circle { fill: var(--ink-3); opacity: 0; }
.ex-caret { fill: var(--ink); opacity: 0; }
.ex-hide { fill: var(--card); transform: scaleX(0); transform-box: fill-box; transform-origin: 100% 50%; }
.ex-heart { fill: var(--dot); stroke: var(--dot); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 50%; }
.ex-ripple { fill: none; stroke: var(--dot); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.ex-cursor { fill: var(--ink); stroke: var(--card); stroke-width: 1.2; stroke-linejoin: round; opacity: 0; }
.ex-moon { fill: var(--card); }
/* The remix: the same card inside out. */
.ex-inv .ex-paper { fill: var(--ink); }
.ex-inv .ex-tile { fill: color-mix(in srgb, var(--ink) 86%, var(--card)); }
.ex-inv .ex-ink, .ex-inv .ex-pend circle:not(.ex-ball) { fill: var(--card); }
.ex-inv .ex-pend line { stroke: color-mix(in srgb, var(--card) 55%, var(--ink)); }
.ex-inv text { fill: var(--card); }
.ex-inv .ex-lab, .ex-inv .ex-by { fill: color-mix(in srgb, var(--card) 62%, var(--ink)); }

/* ---------- scenes: one shows at a time (.on, set by about.js) ----------
   Each moving part rests in its final state and animates in from its first, so a scene that's fading out
   holds its last frame, and anyone who asks for less motion sees every scene complete. */
.ex-scene { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.ex-scene.on { opacity: 1; visibility: visible; transition: opacity 0.35s 0.15s; }  /* a dip, not a muddle */

/* The pendulums swing only on the scene that's showing, starting together each time. Each half swing is a
   little quicker than the last: 0.8 s × 10 / (10 + i). */
.ex-pend { animation: 0.8s ease-in-out infinite alternate both; }
.on .ex-pend { animation-name: ex-swing; }
.ex-p1 { animation-duration: 0.7273s; }
.ex-p2 { animation-duration: 0.6667s; }
.ex-p3 { animation-duration: 0.6154s; }
.ex-p4 { animation-duration: 0.5714s; }
.ex-p5 { animation-duration: 0.5333s; }
.ex-p6 { animation-duration: 0.5s; }
.ex-p7 { animation-duration: 0.4706s; }
.ex-p8 { animation-duration: 0.4444s; }
.ex-p9 { animation-duration: 0.4211s; }
.ex-p10 { animation-duration: 0.4s; }
.ex-p11 { animation-duration: 0.381s; }
@keyframes ex-swing { from { transform: rotate(12deg); } to { transform: rotate(-12deg); } }

/* 1. Make it */
.ex-s1.on .ex-hide { animation: ex-type 0.4s both; }
.ex-s1.on .ex-l1 .ex-hide { animation-timing-function: steps(21); animation-delay: 0.35s; }
.ex-s1.on .ex-l2 .ex-hide { animation-timing-function: steps(18); animation-delay: 0.8s; animation-duration: 0.36s; }
.ex-s1.on .ex-l3 .ex-hide { animation-timing-function: steps(18); animation-delay: 1.2s; animation-duration: 0.36s; }
.ex-s1.on .ex-l4 .ex-hide { animation-timing-function: steps(17); animation-delay: 1.6s; animation-duration: 0.34s; }
.ex-s1.on .ex-l5 .ex-hide { animation-timing-function: steps(17); animation-delay: 1.98s; animation-duration: 0.34s; }
.ex-s1.on .ex-caret { animation: ex-blink 0.5s steps(1) 2.32s 2; }
.ex-s1.on .ex-send { animation: ex-press 0.28s ease-in-out 2.6s both; }
.ex-s1.on .ex-think-dot { animation: ex-pulse 0.5s ease-in-out 2.75s 2; }
.ex-s1.on .ex-dots circle { animation: ex-think 0.75s ease-in-out 2.8s both; }
.ex-s1.on .ex-dots circle:nth-child(2) { animation-delay: 2.92s; }
.ex-s1.on .ex-dots circle:nth-child(3) { animation-delay: 3.04s; }
.ex-s1.on .ex-app { animation: ex-pop 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 3.5s both; }
.ex-s1.on .ex-pend { animation-delay: 3.7s; }
.ex-send, .ex-app, .ex-think-dot { transform-box: fill-box; transform-origin: 50% 50%; }
.ex-app { transform-origin: 0 50%; }
@keyframes ex-type { from { transform: scaleX(1); } }
@keyframes ex-blink { from { opacity: 1; } 50% { opacity: 0; } }
@keyframes ex-press { 50% { transform: scale(0.84); } }
@keyframes ex-pulse { 50% { transform: scale(1.6); } }
@keyframes ex-think { 0% { opacity: 0; } 30% { opacity: 1; transform: translateY(-4px); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ex-pop { from { opacity: 0; transform: scale(0.94); } }

/* 2. Bring a dish: the dome lifts and the project pops up in front of it, as the logo's ball does, then the
   notes draw in. */
.ex-dome { opacity: 0; transform-box: fill-box; transform-origin: 100% 100%; }
.ex-dish { transform-box: fill-box; transform-origin: 50% 100%; }
.ex-s2.on .ex-dome { animation: ex-lift 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.35s both; }
.ex-s2.on .ex-dish { animation: ex-serve 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) 0.7s both; }
.ex-s2.on .ex-note { animation: ex-fade 0.35s ease-out both; }
.ex-s2.on .ex-note .ex-lead { animation: ex-draw 0.45s ease-out both; }
.ex-s2.on .ex-n1, .ex-s2.on .ex-n1 .ex-lead { animation-delay: 1.6s; }
.ex-s2.on .ex-n2, .ex-s2.on .ex-n2 .ex-lead { animation-delay: 1.75s; }
.ex-s2.on .ex-n3, .ex-s2.on .ex-n3 .ex-lead { animation-delay: 1.9s; }
.ex-s2.on .ex-n4, .ex-s2.on .ex-n4 .ex-lead { animation-delay: 2.05s; }
@keyframes ex-lift {
  0% { opacity: 1; transform: none; }
  35% { transform: rotate(33deg); }
  55% { transform: rotate(19deg); }
  68% { opacity: 1; transform: rotate(22deg); }
  100% { opacity: 0; transform: translate(40px, -50px) rotate(26deg); }
}
@keyframes ex-serve {
  0% { transform: scale(0); }
  55% { transform: scale(1.05); }
  78% { transform: scale(0.98); }
  100% { transform: none; }
}
@keyframes ex-fade { from { opacity: 0; } }
@keyframes ex-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 3. Help yourself: the pointer taps the card, which opens to fill the stage and gets a like. */
.ex-others { opacity: 0; }
.ex-zoom { transform: translate(-95.5px, -22px) scale(2.15); }  /* opened: 357 x 344, in the middle */
.ex-s3.on .ex-others { animation: ex-out 0.4s ease-in 2s both; }
.ex-s3.on .ex-zoom { animation: ex-open 0.7s cubic-bezier(0.6, 0, 0.2, 1) 2.1s both; }
.ex-s3.on .ex-cursor { animation: ex-point 1.7s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both; }
.ex-s3.on .ex-ripple { animation: ex-ripple 0.6s ease-out 1.55s both; }
.ex-s3.on .ex-heart { animation: ex-like 0.8s ease-out 3.5s both; }
@keyframes ex-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ex-open { from { transform: none; } }
@keyframes ex-point {
  0% { opacity: 1; transform: translate(640px, 430px); }
  55% { transform: translate(300px, 130px); }
  62% { transform: translate(300px, 130px) scale(0.84); }
  70% { opacity: 1; transform: translate(300px, 130px); }
  100% { opacity: 0; transform: translate(300px, 130px); }
}
@keyframes ex-ripple { from { opacity: 1; transform: scale(0.2); } to { opacity: 0; transform: scale(1.4); } }
@keyframes ex-like {
  0% { opacity: 0; fill: transparent; stroke: var(--ink); }
  35% { opacity: 1; fill: transparent; stroke: var(--ink); transform: none; }
  60% { fill: var(--dot); stroke: var(--dot); transform: scale(1.3); }
}

/* 4. Go back for seconds */
.ex-arc-head, .ex-arc-label, .ex-back-head { transform-box: fill-box; }
.ex-s4.on .ex-arc { animation: ex-draw 0.6s ease-out 0.5s both; }
.ex-s4.on .ex-arc-head { animation: ex-fade 0.15s 1.05s both; }
.ex-s4.on .ex-arc-label { animation: ex-fade 0.3s 0.8s both; }
.ex-s4.on .ex-remix { animation: ex-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both; }
.ex-s4.on .ex-credit { animation: ex-fade 0.4s 2.3s both; }
.ex-s4.on .ex-back { animation: ex-draw 0.7s ease-in-out 2.5s both; }
.ex-s4.on .ex-back-head { animation: ex-fade 0.15s 3.15s both; }
@keyframes ex-rise { from { opacity: 0; transform: translateY(14px); } }

/* 5. It goes on the record */
.ex-drop { transform-box: fill-box; }
.ex-s5.on .ex-title-block, .ex-s5.on .ex-legend { animation: ex-fade 0.4s 0.1s both; }
.ex-s5.on .ex-col { animation: ex-rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.ex-s5.on .ex-c1 { animation-delay: 0.25s; }
.ex-s5.on .ex-c2 { animation-delay: 0.37s; }
.ex-s5.on .ex-c3 { animation-delay: 0.49s; }
.ex-s5.on .ex-c4 { animation-delay: 0.61s; }
.ex-s5.on .ex-c5 { animation-delay: 0.73s; }
.ex-s5.on .ex-c6 { animation-delay: 0.85s; }
.ex-s5.on .ex-drop { animation: ex-drop 0.9s 1.45s both; }
.ex-s5.on .ex-tag-new { animation: ex-fade 0.4s 2.3s both; }
@keyframes ex-drop {
  0% { opacity: 0; transform: translateY(-150px); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  10% { opacity: 1; }
  55% { transform: none; animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  72% { transform: translateY(-14px); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
  86% { transform: none; animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
  93% { transform: translateY(-3px); }
  100% { transform: none; }
}

/* Less motion: no scene animations, so each scene is drawn complete, with the project in the buffet rather
   than opened. about.js doesn't play the chapters by itself either; they switch scenes when clicked. */
@media (prefers-reduced-motion: reduce) {
  .ex-media *, .ex-bar span { animation: none !important; }
  .ex-scene { transition: none; }
  .ex-others { opacity: 1; }
  .ex-zoom { transform: none; }
}

/* ---------- why it's here: one big sentence ---------- */
.why { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 8vw, 112px); text-align: center; }
.why-tag { margin: 0 0 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.why-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--dot); vertical-align: 1px; }
.why-text { margin: 0; font: 600 clamp(26px, 3.6vw, 56px)/1.04 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.why-text span { color: color-mix(in srgb, var(--ink-2), var(--ink-3)); }  /* softer, still 3:1 or more */
.why + .bar { margin-top: 0; }  /* the home page: as much room under the sentence as over it */

/* ---------- the facts: six white cards, each a small picture of one idea over a few words ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.fact { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 14px 16px 20px; background: var(--card); }
.fact-art { display: flex; flex: 1; flex-direction: column; justify-content: center; min-height: 176px; padding: 10px 0 14px; }
.fact-head { margin: 0; font: 600 clamp(26px, 2.4vw, 38px)/0.95 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.fact p { max-width: 48ch; margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; text-wrap: pretty; }
.fact p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fact p a:hover { text-decoration-thickness: 2px; }

/* Every kind of project, each a way into Explore. */
.kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.kinds a {
  display: grid; justify-items: center; align-content: center; gap: 10px; aspect-ratio: 1; padding: 4px; min-width: 0;
  background: var(--page); font-size: 9.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
.kinds a:hover { background: var(--ink); color: var(--card); }
.kinds .icon { width: 20px; height: 20px; stroke-width: 1.3; }
.kinds span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The models, like a menu: name and how many projects each has made. */
.fact-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.fact-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.fact-menu a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-menu a span:last-child { color: var(--ink-3); }
.fact-menu a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }

/* The latest on the timeline. */
.fact-entries { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.fact-entries a {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.fact-date, .fact-model { color: var(--ink-2); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.fact-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact-entries a:hover .fact-title { text-decoration: underline; text-underline-offset: 3px; }

/* Two web addresses with a wall between them. */
.sandbox { display: grid; grid-template-columns: minmax(0, 1fr) 3px minmax(0, 1fr); gap: 0 16px; }
.sandbox-side {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-width: 0; min-height: 136px;
  padding: 12px; background: var(--page); font-size: 12.5px; line-height: 1.35;
}
.sandbox-host { font: 500 11px/1.3 var(--mono); overflow-wrap: anywhere; }
.sandbox-play { outline: 1px dashed var(--ink-3); outline-offset: -6px; }
.sandbox-wall { position: relative; background: var(--ink); }
.sandbox-wall .icon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 32px; height: 32px; padding: 7px;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--card); stroke-width: 1.4;
}

/* What anyone may do with a project. */
.fact-specs { margin: 0; border-top: 1px solid var(--ink); }
.fact-specs div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fact-specs dt { color: var(--ink-2); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.fact-specs dd { margin: 0; font-size: 13px; }

/* The logo's mark, large; its dome lifts higher when the card is hovered, as the header's does. */
.fact-mark svg { width: min(200px, 64%); height: auto; margin: 0 auto; overflow: visible; }
.fact-hello:hover .mark-lid { transform: rotate(34deg); }
.fact-hello:hover .mark-dot { transform: scale(1.12); }

/* ---------- smaller screens ---------- */
@media (max-width: 1099px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ex { grid-template-columns: minmax(0, 1fr); }  /* the drawing on top, the chapters under it */
  .ex-text { gap: 20px; padding-top: 4px; }
}
@media (max-width: 640px) {
  .ex { margin-top: 24px; padding: 10px 11px 12px; }
  .ex-step p { margin-left: 0; font-size: 13px; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { padding: 10px 11px 16px; }
  .kinds a { padding: 2px; font-size: 8.5px; letter-spacing: 0.02em; }  /* "Animation" fits a fifth of a phone */
  .why-text { font-size: clamp(24px, 7vw, 30px); }
}