.fb { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; overflow-y: auto;
  background: var(--bg); color: var(--fg); padding: 28px var(--gutter); text-align: center; }
.fb[hidden] { display: none; }
.fb__in { width: min(880px, 100%); margin: auto; }
.fb__place { margin: 0 0 22px; font: 500 11px/1.6 var(--label); letter-spacing: 0.3em; text-transform: uppercase; }
.fb__frame { position: relative; aspect-ratio: 16 / 10; background: #e4dfd3; border: 1px solid var(--line); }
.fb__still, .fb__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fb__clip[hidden] { display: none; }
.fb__line { margin: 22px auto 0; max-width: 34em; font: 400 16px/1.5 var(--body); color: var(--fg-dim); }
.fb__more { margin: 18px 0 0; min-height: 34px; }
.fb__btn { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 1px solid var(--fg); border-radius: 999px; background: none; color: inherit; cursor: pointer;
  font: 500 10.5px/1 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.fb__btn[hidden] { display: none; }
.fb__btn:hover { background: var(--fg); color: var(--bg); }
html.fb-on, html.fb-on body { overflow: hidden; }
.loader__note { margin: 20px 0 0; font: 500 9.5px/1.6 var(--label); letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.55; }
.loader__note span { display: none; }
.wip { position: fixed; z-index: 30; top: 33px; right: calc(var(--gutter) + 178px); margin: 0; padding: 5px 9px 4px; border-radius: 3px; pointer-events: none;
  background: rgba(239, 235, 226, 0.72); color: var(--fg);
  font: 500 9px/1 var(--label); letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; }
body.is-loading .wip { visibility: hidden; }
@media (max-width: 760px), (pointer: coarse) {
  .loader__note span { display: inline; }
}
@media (max-width: 760px) {
  .wip { top: 61px; left: var(--gutter); right: auto; }
}
.credit { position: relative; z-index: 2; margin: 14px 0 0; font: 400 10px/1.5 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.credit a { border-bottom: 1px solid currentColor; }

/* Author identity on the opening plan. */
.hero__kicker { display: flex; align-items: center; gap: 14px; }
.author-avatar { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 50%; flex: none; }
.hero__kicker .hero__identity { margin: 0; color: inherit; }
.hero__kicker .hero__author { margin: 0; color: inherit; font-size: 9px; letter-spacing: 0.06em; }
.hero__title { top: 166px; }
.mark { font-size: clamp(18px, 3vw, 30px); }
@media (max-width: 760px) {
  .author-avatar { width: 48px; height: 48px; }
  .hero__kicker { gap: 10px; }
  .hero__title { top: 150px; }
}

.hero__lede { top: calc(166px + 3 * 0.95 * clamp(56px, 7vw, 120px) + 26px); }

/* Green contact actions, with a readable dark foreground. */
.whatsapp-button, .corner .whatsapp-contact {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #25d366; color: #07351d; border: 1px solid #25d366;
  text-shadow: none;
}
.whatsapp-button:hover, .corner .whatsapp-contact:hover {
  background: #1db954; border-color: #1db954; color: #052713;
}
.whatsapp-icon { width: 19px; height: 19px; flex: none; }
.corner .whatsapp-contact { padding: 8px 12px; border-radius: 999px; }
.hero__identity a:hover, .hero__lede a:hover, .titleblock a:hover { text-decoration: underline; text-underline-offset: 3px; }
.whatsapp-button:focus-visible, .corner a:focus-visible, .hero a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.ghost a { color: inherit; text-decoration: none; }
.ghost a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Visible, honest loading feedback: completed files, then scene preparation. */
#loader { padding: 32px 24px; text-align: left; overflow-y: auto; justify-content: flex-start; }
.loader__panel { flex: none; width: min(660px, 100%); margin: auto; }
.loader__brand { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 40px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font: 500 11px/1.5 var(--label); letter-spacing: 0.1em; text-transform: uppercase; }
#loader .loader__story { width: 100%; height: auto; }
#loadingTitle { margin: 0; font: 400 clamp(32px, 4.5vw, 58px)/1.08 var(--display); letter-spacing: -0.02em; text-transform: uppercase; }
.loader__intro { max-width: 36em; margin: 20px 0 28px; color: var(--fg-dim); font: 400 16px/1.6 var(--body); }
.loader__readout { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
#loadingStage { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; font: 500 12px/1.5 var(--label); }
#loader #loadPct { min-width: 0; color: var(--accent); font: 400 clamp(64px, 9vw, 112px)/1 var(--display); letter-spacing: -0.04em; }
.loader__spinner { flex: none; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: loading-turn 1s linear infinite; }
.loader__rail { position: relative; height: 10px; margin-top: 16px; overflow: hidden; background: #d9d3c7; }
.loader__rail b { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.loader__detail { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--fg-dim); font: 400 11px/1.5 var(--label); }
.loader__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.loader__steps li { padding-top: 12px; border-top: 2px solid #d9d3c7; color: var(--fg-dim); font: 400 12px/1.5 var(--body); }
.loader__steps li span { display: block; margin-bottom: 4px; font: 500 10px/1.5 var(--label); }
.loader__steps .is-active { border-color: var(--accent); color: var(--fg); font-weight: 500; }
.loader__steps .is-done { border-color: var(--fg); color: var(--fg); }
.loader__slow { margin: 24px 0 0; max-width: 40em; font: 400 14px/1.55 var(--body); }
.loader__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.loader__actions[hidden], .loader__actions [hidden], .loader__slow[hidden] { display: none; }
#loader[data-stage="ready"] .loader__spinner, #loader[data-stage="error"] .loader__spinner { animation: none; border-color: var(--accent); }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader__spinner { animation: none; } }
@media (max-width: 480px) {
  #loader { padding: 24px; }
  .loader__brand { margin-bottom: 28px; font-size: 10px; }
  .loader__intro { font-size: 14px; margin: 16px 0 24px; }
  #loadingStage { max-width: 150px; font-size: 11px; }
  .loader__steps { gap: 10px; margin-top: 24px; }
  .loader__steps li { font-size: 11px; }
}