/* IB Conecta — Arquivo da Congregação.
   Tokens sampled from the approved comp .impeccable/mocks/comp-arquivo-b-folha.png
   (see .impeccable/surfaces/templates-public-home-html.md for the sampling record).
   Archivo and Caveat are SIL OFL, self-hosted as variable woff2. */

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Archivo;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Sampled from the approved comp, never estimated. */
  --paper: #ece8e2;
  --paper-shade: #d4d0ca;
  --mount: #f9f9f9;
  --graphite: #222527;
  --photo-black: #111313;
  --archive-gray: #74706c;
  --ink-red: #8b211a;

  --ink-red-hover: #6f1a14;
  --graphite-hover: #15181a;
  --paper-warm: #f4f1ec;

  --font: Archivo, "Segoe UI", system-ui, sans-serif;
  --font-hand: Caveat, "Segoe UI", cursive;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* The gutter is the only separator in this world: no radius, no shadow. */
  --gutter: 6px;
  --hair: 1px;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.75rem;
  --measure: min(66ch, 100%);
  /* Largura da folha das páginas internas. A prosa continua em --measure dentro dela. */
  --sheet: 74rem;

  --paper-fill: url("../img/paper.png");
  --corner: url("../img/corner.svg");
  --tick: url("../img/tick.svg");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scrollbar-color: var(--graphite) var(--paper-shade);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 100%;
  color: var(--graphite);
  background-color: var(--paper);
  background-image: var(--paper-fill);
  background-size: 512px;
  background-repeat: repeat;
  line-height: 1.55;
  caret-color: var(--ink-red);
  font-variant-numeric: tabular-nums;
}

::selection {
  background: var(--ink-red);
  color: var(--mount);
}

:focus-visible {
  outline: 2px solid var(--ink-red);
  outline-offset: 2px;
}

a {
  color: var(--graphite);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink-red);
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  padding: 0.7rem 1.1rem;
  background: var(--graphite);
  color: var(--paper);
  text-decoration: none;
  transform: translateY(-160%);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-link:focus {
  transform: none;
  color: var(--paper);
  outline-color: var(--paper);
}

/* ---------- Shell ---------- */

.wrap {
  width: 100%;
  padding: 0 var(--gutter) var(--gutter);
}

/* The nav row is a single hairline band on paper, every destination visible. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.4rem;
  padding: 0.75rem var(--space-sm) 0.55rem;
  border-bottom: var(--hair) solid var(--archive-gray);
  margin-bottom: var(--gutter);
}

.brand {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--graphite);
  white-space: nowrap;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.15rem;
  row-gap: 0.2rem;
  margin: 0;
}

.site-header nav a {
  padding: 0.15rem 0;
  text-decoration: none;
  color: var(--graphite);
  font-weight: 500;
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: var(--hair) solid transparent;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: var(--ink-red);
  border-bottom-color: var(--ink-red);
}

main {
  display: block;
}

.site-footer {
  margin-top: var(--gutter);
  padding: var(--space-md) var(--space-sm);
  border-top: var(--hair) solid var(--archive-gray);
  font-size: 0.85rem;
  color: var(--archive-gray);
}

.site-footer strong {
  color: var(--graphite);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.site-footer p {
  margin: 0 0 var(--space-sm);
}

.social-links a {
  margin-right: 1.1rem;
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
}

.social-links a:hover {
  text-decoration: underline;
}

/* ---------- Plates: the ranking device is inversion, not elevation ---------- */

.plate {
  position: relative;
  background: var(--paper-warm);
  border: var(--hair) solid var(--paper-shade);
  padding: var(--space-md);
}

.plate--mount {
  background: var(--mount);
  border-color: var(--paper-shade);
}

.plate--graphite {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

.plate--graphite a {
  color: var(--paper);
}

.plate--ink {
  background: var(--ink-red);
  border-color: var(--ink-red);
  color: var(--mount);
}

/* Album photo-corner mounts. Authored SVG, one span per corner so each can rotate. */
.mounts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mounts i {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--corner) center / contain no-repeat;
}

.mounts i:nth-child(1) { top: -1px; left: -1px; }
.mounts i:nth-child(2) { top: -1px; right: -1px; transform: rotate(90deg); }
.mounts i:nth-child(3) { bottom: -1px; right: -1px; transform: rotate(180deg); }
.mounts i:nth-child(4) { bottom: -1px; left: -1px; transform: rotate(270deg); }

/* ---------- Type ---------- */

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

h1 {
  font-size: clamp(1.5rem, 3.4vw, 2.05rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.15rem;
  letter-spacing: 0;
}

h3 {
  font-size: 1rem;
}

.label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--archive-gray);
}

.plate--graphite .label,
.plate--ink .label {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.cell-heading {
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: var(--hair) solid var(--paper-shade);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite);
}

.muted {
  color: var(--archive-gray);
}

.caption {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--archive-gray);
}

/* ---------- Actions ---------- */

.cta {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--ink-red);
  color: var(--mount);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  border: var(--hair) solid var(--ink-red);
}

.cta:hover {
  background: var(--ink-red-hover);
  border-color: var(--ink-red-hover);
  color: var(--mount);
}

.cta.secondary {
  background: transparent;
  color: var(--graphite);
  border-color: var(--graphite);
}

.cta.secondary:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

button.cta {
  cursor: pointer;
  font-family: inherit;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  margin: var(--space-md) 0 0;
}

/* ---------- The contact sheet ---------- */

.contact-sheet {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Dense packing lets the plates sit where the comp puts them while the DOM keeps a
     sensible reading order: the service time, then its actions, then the dated lists. */
  grid-auto-flow: row dense;
  gap: var(--gutter);
}

/* Every cell fills its track. Without this the browser's default figure margin
   (1em 40px) shrinks each photograph into an island of paper. */
.contact-sheet > * {
  margin: 0;
}

/* Every region occupies whole cells; nothing floats between them.
   Twenty-four cells: twelve photographs plus the mount, two actions, three lists
   and the handle. The count is the composition's density commitment. */
.sheet-mount { grid-area: 1 / 1 / 2 / 3; }
.sheet-action--primary { grid-area: 2 / 1 / 3 / 2; }
.sheet-action--secondary { grid-area: 2 / 2 / 3 / 3; }
.sheet-list--agenda { grid-area: 2 / 5 / 3 / 7; }
.sheet-list--sermons { grid-area: 3 / 1 / 4 / 3; }
.sheet-list--news { grid-area: 4 / 5 / 5 / 7; }
.sheet-handle { grid-area: 4 / 1 / 5 / 3; }
.sheet-frame { grid-column: span 1; }

.sheet-mount {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
}

.sheet-mount .service-when {
  margin: 0 0 0.35rem;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--graphite);
}

.sheet-mount .service-where {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--graphite);
}

.sheet-mount .service-host {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--archive-gray);
}

/* The whole cell is the action, the way the comp works it. */
.sheet-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) 0.7rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-decoration: none;
}

a.sheet-action.plate--ink:hover {
  background: var(--ink-red-hover);
  border-color: var(--ink-red-hover);
  color: var(--mount);
}

a.sheet-action.plate--graphite:hover {
  background: var(--graphite-hover);
  border-color: var(--graphite-hover);
  color: var(--paper);
}

.sheet-list {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.9rem;
  font-size: 0.85rem;
}

.sheet-list ol,
.sheet-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sheet-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: var(--hair) solid var(--paper-shade);
}

.sheet-list li:last-child {
  border-bottom: 0;
}

.sheet-list .when {
  flex: none;
  color: var(--ink-red);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.sheet-list a {
  text-decoration: none;
  color: var(--graphite);
}

.sheet-list a:hover {
  color: var(--ink-red);
  text-decoration: underline;
}

.sheet-list .empty {
  margin: 0;
  color: var(--archive-gray);
  font-size: 0.8rem;
}

/* The handle is a short strip on the sheet's bottom edge, not a full cell. */
.sheet-handle {
  align-self: end;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  font-size: 0.63rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--graphite);
}

.sheet-handle:hover {
  color: var(--ink-red);
}

/* A frame is a photograph with its inked caption beneath, on a paper mount. */
.sheet-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper-warm);
  border: var(--hair) solid var(--paper-shade);
  padding: 5px 5px 0;
  text-decoration: none;
}

/* A register cross sits on the cell's own corner, so it lands on the sheet's
   intersections. Tiling it across the container instead turns the sheet into a
   dotted texture, which is not what the comp draws. */
.sheet-frame::before {
  content: "";
  position: absolute;
  top: calc(-6px - var(--gutter) / 2);
  left: calc(-6px - var(--gutter) / 2);
  width: 12px;
  height: 12px;
  background: var(--tick) center / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

.sheet-frame img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: the width/height attributes on the img are a
     presentational hint that otherwise beats aspect-ratio and stretches the row. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--paper-shade);
  /* The comp's frames read as archival prints: near-monochrome with a warm cast
     and deep blacks, not colour photographs sitting on paper. */
  filter: saturate(0.4) contrast(1.07) brightness(0.97);
}

.sheet-frame figcaption,
.sheet-frame .frame-caption {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.3rem 0.15rem 0.35rem;
  font-family: var(--font-hand);
  font-size: 0.9rem;
  line-height: 1.15;
  color: var(--archive-gray);
}

.sheet-frame .frame-date {
  flex: none;
  font-family: var(--font);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: flex-end;
}

.sheet-frame a {
  display: block;
  line-height: 0;
}

.sheet-frame:hover img {
  filter: saturate(0.9) contrast(1.06);
}

.sheet-frame:hover figcaption {
  color: var(--graphite);
}

/* On a wide viewport the sheet owns the first screen edge to edge, four equal rows,
   the way the comp composes it. The photographs take whatever height the row leaves
   after the caption instead of forcing a square and pushing the sheet past the fold. */
@media (min-width: 901px) {
  .contact-sheet {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    height: calc(100svh - 3.5rem);
    min-height: 33rem;
  }

  .sheet-frame img {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: auto;
  }
}

/* The evangelistic copy is the church's own voice, set as a quiet caption to the sheet. */
.home-lede {
  max-width: var(--measure);
  margin: var(--space-lg) 0 0;
  padding: 0 var(--space-sm);
  font-size: 0.95rem;
  color: var(--archive-gray);
}

.home-lede strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--graphite);
  font-size: 1.05rem;
  font-weight: 600;
}

/* ---------- Content pages ---------- */

/* As internas são folhas montadas no papel, não faixas. Sem esta medida a linha do
   registro corria 1.893px numa tela de 1920 e nada era varrível; a home fica de fora
   porque a folha de contato é sangria por desenho.

   A folha encosta na esquerda em vez de centralizar: a nav é sangria em toda página,
   então alinhar a folha à mancha da nav dá uma margem só, à direita, como folha de
   registro sob o cabeçalho — centralizar deixaria o conteúdo alinhado a nada. */
.cms-page {
  max-width: var(--sheet);
  padding: var(--space-lg) var(--space-sm) var(--space-xl);
}

.page-head {
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: var(--hair) solid var(--archive-gray);
}

.page-head h1 {
  margin: 0;
}

.cms-page .lede {
  max-width: var(--measure);
  font-size: 1.05rem;
  color: var(--archive-gray);
  margin: 0.5rem 0 0;
}

.cms-page .rich-text {
  max-width: var(--measure);
}

.cms-page .rich-text :first-child { margin-top: 0; }
.cms-page .rich-text img { max-width: 100%; height: auto; }

.panel {
  position: relative;
  background: var(--paper-warm);
  border: var(--hair) solid var(--paper-shade);
  padding: var(--space-md) var(--space-md) var(--space-md);
  margin: 0 0 var(--gutter);
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.panel h2,
.panel h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  margin-bottom: 0.65rem;
  border-bottom: var(--hair) solid var(--paper-shade);
}

/* Panels tile into the sheet on wide viewports instead of stacking in a void. */
.panel-set {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--gutter);
  align-items: start;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}

.news-list li {
  padding: 0.55rem 0;
  border-bottom: var(--hair) solid var(--paper-shade);
}

.news-list li:last-child { border-bottom: 0; }

.news-list a {
  text-decoration: none;
  color: var(--graphite);
  font-weight: 500;
}

.news-list a:hover {
  color: var(--ink-red);
  text-decoration: underline;
}

.news-meta {
  color: var(--archive-gray);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Registro datado ---------- */

/* Índice de arquivo, não lista de cartões. A data é o índice do acervo, então ela ganha
   a coluna da esquerda em algarismos tabulares grandes em vez de ser sussurrada em
   cinza sob o título. O fio vertical da coluna cruza com o fio de cada linha, e esses
   cruzamentos são a mesma marca de registro da folha de contato. */

.register {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  border-top: var(--hair) solid var(--paper-shade);
}

.register-entry {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: start;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: var(--hair) solid var(--paper-shade);
  text-decoration: none;
  color: var(--graphite);
}

/* Aquece o material; nunca levanta. */
.register-entry:hover,
.register-entry:focus-visible {
  background: var(--paper-warm);
}

.register-entry:hover .register-title,
.register-entry:focus-visible .register-title {
  color: var(--ink-red);
  text-decoration: underline;
}

.register-date {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-right: var(--space-md);
  border-right: var(--hair) solid var(--paper-shade);
  align-self: stretch;
}

.register-day {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--photo-black);
  font-variant-numeric: tabular-nums;
}

.register-month,
.register-time {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--archive-gray);
  font-variant-numeric: tabular-nums;
}

.register-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.register-title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--graphite);
}

.register-note {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--archive-gray);
  max-width: var(--measure);
}

.register-where {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--archive-gray);
}

.register-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.register-tag {
  padding: 0.16em 0.5em;
  border: var(--hair) solid currentcolor;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--archive-gray);
}

/* O vermelho de sinal só aparece quando algo é pedido do visitante. */
.register-tag--asks {
  color: var(--ink-red);
}

@media (max-width: 34rem) {
  .register-entry {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  /* Sem coluna, a data volta a ser uma linha de cabeçalho da entrada. */
  .register-date {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-sm);
    padding-right: 0;
    border-right: 0;
  }

  .register-day {
    font-size: 1.3rem;
  }
}

/* ---------- Selo de estado ---------- */

/* Modo Operar precisa de estado legível de relance. A marca distingue os tons pela
   forma — vazada, cheia, cortada — porque escalas e coletâneas são impressas em preto
   e branco, e porque cor sozinha não chega a quem não a distingue. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.16em 0.5em 0.16em 0.42em;
  border: var(--hair) solid currentcolor;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: 0.05em;
}

.state-mark {
  width: 0.62em;
  height: 0.62em;
  flex: none;
  border: var(--hair) solid currentcolor;
}

.state--open {
  color: var(--ink-red);
}

/* Caixa vazada: ninguém marcou ainda. */
.state--open .state-mark {
  background: transparent;
}

.state--settled {
  color: var(--archive-gray);
}

/* Caixa cheia: resolvido. */
.state--settled .state-mark {
  background: currentcolor;
}

.state--closed {
  color: var(--archive-gray);
}

/* Caixa cortada: resolvido pelo não. */
.state--closed .state-mark {
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.6px),
    currentcolor calc(50% - 0.6px),
    currentcolor calc(50% + 0.6px),
    transparent calc(50% + 0.6px)
  );
}

.media-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-md);
  background: var(--photo-black);
  border: var(--hair) solid var(--paper-shade);
  overflow: hidden;
}

.media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Messages and notes ---------- */

.messages {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--gutter);
}

.messages li {
  padding: 0.7rem 0.9rem;
  background: var(--mount);
  color: var(--graphite);
  border: var(--hair) solid var(--paper-shade);
  border-left: 4px solid var(--graphite);
}

/* State is marked by shape as well as hue: the left bar changes weight, not just colour. */
.messages li.error {
  border-left: 4px double var(--ink-red);
  color: var(--ink-red);
}

.footnote-ref {
  font-size: 0.72em;
  font-weight: 600;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.12em;
  color: var(--ink-red);
  text-decoration: none;
}

.footnote-ref:hover,
.footnote-ref:focus-visible {
  text-decoration: underline;
}

/* O convite do rodapé é a última frase da página: mede como texto corrido, não como
   coluna larga do rodapé. Sem isto a linha atravessava a tela inteira em desktop. */
.whatsapp-welcome {
  max-width: var(--measure);
  margin: var(--space-md) 0 0;
  color: var(--graphite);
}

.footnote {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--archive-gray);
  max-width: var(--measure);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-sm);
  border-top: var(--hair) solid var(--paper-shade);
  scroll-margin-top: 1.5rem;
}

.footnote:target {
  border-top-color: var(--ink-red);
  color: var(--graphite);
}

.pix-key {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0.4rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  background: var(--mount);
  border: var(--hair) solid var(--paper-shade);
  color: var(--graphite);
  user-select: all;
}

/* ---------- Forms ---------- */

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

form p { margin: 0 0 0.85rem; }

form label {
  display: inline-block;
  margin-bottom: var(--space-xs);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--archive-gray);
}

form input[type="text"],
form input[type="email"],
form input[type="number"],
form input[type="tel"],
form input[type="date"],
form input[type="datetime-local"],
form input[type="password"],
form input[type="search"],
form input[type="url"],
form input[type="file"],
form textarea,
form select {
  width: 100%;
  /* A field is as wide as its content needs, not as wide as the page. */
  max-width: 28rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 0.95rem;
  border: var(--hair) solid var(--archive-gray);
  background: var(--mount);
  color: var(--graphite);
}

form textarea {
  max-width: 44rem;
  min-height: 7rem;
}

form input:focus,
form textarea:focus,
form select:focus {
  border-color: var(--ink-red);
}

form input[type="checkbox"],
form input[type="radio"] {
  width: auto;
  margin-right: 0.4rem;
  accent-color: var(--ink-red);
}

.form-errors,
.errorlist {
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0.4rem 0.6rem;
  color: var(--ink-red);
  border-left: 4px double var(--ink-red);
  background: var(--mount);
  font-size: 0.85rem;
}

.helptext {
  display: block;
  font-size: 0.78rem;
  color: var(--archive-gray);
}

/* ---------- Tables: the archive's ledger ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: var(--hair) solid var(--paper-shade);
  vertical-align: top;
}

th {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--archive-gray);
  border-bottom-color: var(--archive-gray);
}

/* ---------- Status marked by form, not hue alone ---------- */

.tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: var(--hair) solid var(--archive-gray);
  color: var(--archive-gray);
}

/* Confirmed inverts to solid; pending stays outlined; refused is double-ruled.
   The shape carries the state so it survives greyscale and colour blindness. */
.tag--confirmed {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

.tag--pending {
  border-style: dashed;
}

.tag--refused {
  border-style: double;
  border-width: 3px;
  color: var(--ink-red);
  border-color: var(--ink-red);
}

/* ---------- Motion: one moment, the sheet develops ---------- */

@keyframes develop {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.home .sheet-frame img {
  animation: develop 0.5s ease-out both;
  animation-delay: calc(var(--frame-index, 0) * 55ms);
}

/* ---------- Adaptation: the archive survives the phone ---------- */

/* Narrower viewports drop the fixed placement and fall back to DOM order, which is
   already the reading order: facts, actions, dated lists, then the archive. */
@media (max-width: 900px) {
  .contact-sheet {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sheet-mount,
  .sheet-action--primary,
  .sheet-action--secondary,
  .sheet-list--agenda,
  .sheet-list--sermons,
  .sheet-list--news,
  .sheet-handle {
    grid-area: auto;
  }

  .sheet-mount,
  .sheet-list {
    grid-column: span 4;
  }

  .sheet-action,
  .sheet-handle {
    grid-column: span 2;
  }
}

@media (max-width: 560px) {
  :root {
    --gutter: 4px;
  }

  .contact-sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet-mount,
  .sheet-list,
  .sheet-handle {
    grid-column: span 2;
  }

  .sheet-action {
    grid-column: span 1;
  }

  .site-header {
    gap: 0.35rem 1rem;
  }

  .sheet-frame figcaption {
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .sheet-frame img {
    animation: none;
  }
}

@media print {
  body {
    background: #fff;
    /* Tokens amostrados também no papel: o mundo não troca de paleta ao imprimir. */
    color: var(--photo-black);
  }

  .site-header nav,
  .sheet-action {
    display: none;
  }

  .plate,
  .sheet-frame,
  .panel {
    /* O fio de arquivo #D4D0CA desaparece na impressora; o cinza de arquivo sobrevive. */
    border-color: var(--archive-gray);
  }

  /* A escala e a coletânea saem em preto e branco: a marca do selo tem de sobreviver
     ao descarte de cor, então a forma é forçada a imprimir. */
  .state,
  .state-mark {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}