/* Hallmark · shape: Timetable-led (swap from Long Document) · genre: editorial · theme: Atelier (by request) · job: visit · draw: 90b2ee
 * hero: Stage · nav: edge-aligned · footer: colophon block · imagery: none, the user's logo as the matted print · signature: the logo pressed on cotton stock under the drifting air, the next culto held in a sticky bar
 * axes: light/roman-serif/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: P, the page says when, where and how to give; kept it, a visitor comes for exactly that */
/* Hallmark · swap: Long Document needs prose the church never gave, so the timetable leads; footer index columns need a sitemap, so a colophon block */
/* Hallmark · waive 79 · the hero text sits centred between the nav and the fixed bar of the next culto · the band under the buttons is the air and the bar, the print fills the right side */
/* Hallmark · waive 44c · the measure stops at the hero text while the logo print reaches y 744 · the print on cotton stock is the hero visual and fills the first screen beside the text */
/* Hallmark · waive 77 · the timetable holds two cultos and Liderança two pastors · the church has exactly two of each, so the rows are set large instead of padded with invented ones */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); line-height: 1.6; background: var(--color-paper); padding-bottom: var(--space-3xl); }
h1, h2 { font-weight: var(--display-weight); color: var(--color-ink); }
h1 { letter-spacing: var(--tracking-display); line-height: 1.04; }
h3 { font-weight: var(--serif-small); }
.paper { position: relative; background: var(--color-paper); }

.skip { position: absolute; left: var(--space-md); top: var(--space-md); z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* The air: a fixed field behind the hero and the Pix card; paper sections cover it */
.air { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }
main, .top { position: relative; }
.ofertas::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); background-size: 180px; opacity: 0.05; mix-blend-mode: multiply; pointer-events: none; }

/* Nav: the logo at one edge, the links at the other */
.top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top-logo { display: block; border-radius: var(--radius-pill); }
.top-logo img { width: 72px; height: 72px; }
.top-links { display: flex; gap: var(--space-lg); }
.top-links a { font-size: var(--text-sm); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.top-links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Controls: a hairline key that fills with ink, and a slate-underlined link */
.btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.link { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; white-space: nowrap; }
.link:hover { text-decoration-thickness: 2px; }
.link:active { color: var(--color-accent); }

/* Hero: Stage, the text on five columns, the logo as a print beside it */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; min-height: calc(100dvh - 90px); padding-block: var(--space-2xl); }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }

/* Card stock: cotton, fibre, a lit edge top left, an inner hairline frame, pressed type */
.stock { position: relative; border-radius: 2px; background: var(--fibre) 0 0 / 220px, linear-gradient(160deg, var(--card-lit), var(--color-card) 55%, var(--card-shade)); box-shadow: var(--shadow-card), inset 1px 1px 0 var(--lit); text-shadow: 0 1px 0 var(--lit); }
.stock::before { content: ""; position: absolute; inset: 0.875rem; border: var(--rule-hair) solid var(--color-card-edge); pointer-events: none; }
.print { margin: 0; justify-self: end; width: min(100%, 520px); padding: var(--space-3xl) var(--space-2xl) var(--space-lg); }
.print img { width: 72%; margin-inline: auto; }
.print figcaption { display: flex; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-2xl); padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.print figcaption span:first-child { color: var(--color-ink); }

/* Cultos: the timetable under an ink rule */
.cultos { padding-block: var(--section-gap-s) var(--section-gap); }
.timetable { width: 100%; margin-top: var(--space-xl); border-collapse: collapse; border-top: var(--rule-head) solid var(--color-ink); }
.timetable thead th { padding: var(--space-sm) 0; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); text-align: left; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timetable tbody th, .timetable td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: baseline; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timetable tbody th { font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-title); color: var(--color-ink); }
.timetable .time { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display-s); letter-spacing: var(--tracking-statement); line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.timetable .next { color: var(--color-muted); }

/* Liderança: the two names set large, roles as wall labels */
.lideranca { padding-bottom: var(--section-gap); }
.names { list-style: none; margin: var(--space-xl) 0 0; padding: 0; border-top: var(--rule-head) solid var(--color-ink); }
.names li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-section); letter-spacing: var(--tracking-statement); line-height: 1.1; color: var(--color-ink); }
.role { font-size: var(--text-sm); color: var(--color-muted); }

/* Ofertas: the Pix key pressed on a card, over the air */
.ofertas { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; padding-block: var(--section-gap); }
.pix { padding: var(--space-2xl); }
.pix-label { font-size: var(--text-sm); color: var(--color-muted); }
.pix-key { margin: var(--space-xs) 0 var(--space-xl); font-family: var(--font-display); font-weight: var(--serif-small); font-size: clamp(1.75rem, 3vw, 2.75rem); color: var(--color-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; user-select: all; }
.pix-status { min-height: 1.6em; margin-top: var(--space-sm); font-size: var(--text-sm); }
.ofertas-text p { margin-top: var(--space-md); max-width: 32ch; }

/* Onde estamos: the address as wall labels */
.onde { padding-block: var(--section-gap-s); }
.onde-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.onde-row p { margin-top: var(--space-md); max-width: 32ch; }
.onde-row .btn { margin-top: var(--space-xl); }
.ruled { margin: 0; border-top: var(--rule-head) solid var(--color-ink); }
.ruled > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-md); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled dt { font-size: var(--text-sm); color: var(--color-muted); }
.ruled dd { margin: 0; font-family: var(--font-display); font-weight: var(--serif-small); font-size: var(--text-title); color: var(--color-ink); }

/* Footer: a colophon block */
.foot { border-top: var(--rule-hair) solid var(--color-rule); }
.foot-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl); align-items: center; padding-block: var(--space-2xl); }
.foot-logo { width: 112px; height: 112px; }
.foot-row p:not(.legal) { max-width: 52ch; }
.foot a { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.legal { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }

/* The sticky bar: the next culto, always in reach */
.bar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); background: var(--color-card); border-top: var(--rule-hair) solid var(--color-rule); }
.bar-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding-block: var(--space-xs); }
.bar p { color: var(--color-ink); }
.bar-label { color: var(--color-muted); }

@media (max-width: 60rem) {
  .hero, .ofertas, .onde-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero { min-height: 0; }
  .print { justify-self: start; }
}
@media (max-width: 40rem) {
  .top-links a:not(:last-child) { display: none; }
  .top-logo img { width: 56px; height: 56px; }
  .print { padding: var(--space-2xl) var(--space-lg) var(--space-md); }
  .timetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .timetable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .timetable tbody th, .timetable td { padding: var(--space-2xs) 0; border: 0; }
  .timetable .time { grid-row: span 2; text-align: right; align-self: center; }
  .pix { padding: var(--space-xl) var(--space-lg); }
  .bar-label { display: none; }
  .ofertas-text { order: -1; }
  .ruled > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-md); }
  .foot-row { grid-template-columns: minmax(0, 1fr); }
  .foot-logo { width: 96px; height: 96px; }
}