/* joetepe.com — "One Grid": one twelve-column grid, black ink, one leather-brown signal. */
:root {
  --paper: #f4f4f2;
  --ink: #000;
  --signal: #8a4b2a;      /* reserved for getting in touch and for hover/focus */
  --rule: #e5e5e0;        /* the visible column lines */
  --m: clamp(16px, 2.4vw, 32px);   /* one gutter; also the page margin */
  --row: clamp(44px, 6.5vw, 96px); /* vertical breathing room between rows */
}

@font-face { font-family: "Archivo"; src: url(fonts/archivo-latin.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

* { box-sizing: border-box; }
html { scrollbar-color: var(--ink) var(--paper); }
::selection { background: var(--signal); color: #fff; }
body { margin: 0; font: 400 1.0625rem/1.5 "Archivo", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
img { display: block; width: 100%; }
img { height: auto; filter: grayscale(1) contrast(1.06); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
a:hover { color: var(--signal); }
a:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
h1, h2 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: .98; }
h1, .close h2 { font-size: clamp(2.5rem, 4.9vw, 5.1rem); }
h1 span { display: block; white-space: nowrap; }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.75rem); }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
.nw { white-space: nowrap; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.42; max-width: 58ch; }

/* The page is the grid. Its column lines stay visible behind everything. */
.page { position: relative; isolation: isolate; max-width: 1680px; margin-inline: auto; }
.page::before { content: ""; position: absolute; z-index: -1; inset: 0 var(--m); pointer-events: none;
  background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc((100% - 11 * var(--m)) / 12 + var(--m))); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); padding-inline: var(--m); }

/* Header: bars hang from the top edge and mark where you are. */
.top { border-bottom: 1px solid var(--ink); align-items: start; }
.top a { display: inline-block; text-decoration: none; padding: 16px 0 14px; border-top: 6px solid transparent; }
.top .name { grid-column: 1 / 5; justify-self: start; font-weight: 800; }
.top nav { grid-column: 5 / 9; display: flex; gap: var(--m); }
.top a[aria-current] { font-weight: 800; border-top-color: var(--ink); }
.top .contact { grid-column: 9 / 13; justify-self: end; font-weight: 800; border-top-color: var(--signal); }

/* Hero */
.hero { min-height: clamp(500px, 76vh, 740px); }
.hero-text { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: var(--row); padding-block: var(--m); }
.roles { font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.22; }
.roles + a { display: inline-block; margin-top: 18px; font-weight: 700; }
.hero-photo { grid-column: 5 / 13; margin-block: var(--m); min-height: 340px; position: relative; }
.hero-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 62%; }

/* The one signal: a full-width bar that asks for the email. */
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px var(--m); padding: clamp(22px, 3.4vw, 46px) var(--m); background: var(--signal); color: #fff; text-decoration: none; }
.bar strong { font-weight: 800; font-size: clamp(1.9rem, 3.3vw, 2.75rem); letter-spacing: -.03em; line-height: 1; }
.bar:hover, .bar:focus-visible { background: var(--ink); color: #fff; }
.bar:focus-visible { outline: 3px solid var(--paper); outline-offset: -10px; }

/* Rows: heading in columns 1-4, matter in columns 5-12. */
.row { padding-block: var(--row); border-top: 1px solid var(--ink); row-gap: var(--m); }
.row > h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: var(--m); }
.matter { grid-column: 5 / 13; display: grid; grid-template-columns: subgrid; row-gap: var(--m); }
.matter > * { grid-column: 1 / -1; }
.matter > .lead { grid-column: 1 / 8; }
.photos { display: grid; grid-template-columns: subgrid; row-gap: var(--m); }
.photos li { grid-column: span 2; }
.photos img { aspect-ratio: 1; object-fit: cover; }
/* The first photograph takes a double module; the row's height still comes from the squares. */
.photos li:first-child { grid-column: span 4; position: relative; }
.photos li:first-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

.sermons > h2 { grid-column: 1 / -1; position: static; margin-bottom: calc(var(--row) / 2); }
.sermons ul { display: contents; }
.sermons li { grid-column: span 4; }
.sermons img { aspect-ratio: 4 / 3; object-fit: cover; }
.sermons a { display: block; text-decoration: none; }
.sermons span { display: block; margin-top: 12px; padding-top: 10px; border-top: 6px solid var(--ink); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.15; letter-spacing: -.01em; }
.sermons a:hover span, .sermons a:focus-visible span { border-top-color: var(--signal); }

.home .portrait { grid-column: 1 / 5; }
.home .side { grid-column: 5 / 9; display: grid; gap: var(--m); align-content: space-between; }

/* About page head */
.pagehead { padding-block: var(--row); row-gap: var(--row); }
.pagehead h1 { grid-column: 1 / 11; }
.pagehead .lead { grid-column: 5 / 12; }

/* The close: black field, the last word, and every way to reach Joe. */
.close { background: var(--ink); color: var(--paper); padding-block: var(--row); row-gap: var(--m); align-items: end; }
.close h2 { grid-column: 1 / 9; }
.close ul { grid-column: 9 / 13; font-weight: 700; font-size: 1.15rem; line-height: 1.7; }
.close a { color: inherit; }
.close a:hover { color: inherit; text-decoration-color: var(--signal); text-decoration-thickness: 6px; }
.close a:focus-visible { outline-color: var(--paper); }

/* One authored moment: the photo and the bar arrive in grid steps. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: wipe .72s steps(8, end) both; }
  .hero + .bar { animation: wipe .48s steps(12, end) .6s both; }
  .sermons span, .top a { transition: border-color .15s; }
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* Narrow screens: the same grid at four columns. */
@media (max-width: 820px) {
  .page::before { background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px calc((100% - 3 * var(--m)) / 4 + var(--m))); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > * { grid-column: 1 / -1 !important; }
  .top .name { grid-column: 1 / 3 !important; }
  .top .contact { grid-column: 3 / 5 !important; }
  .top nav { grid-row: 2; border-top: 1px solid var(--rule); }
  .top nav a { border-top: 0; padding: 10px 0; }
  .top nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 4px; }
  h1 span:not(:last-child) { display: inline; white-space: normal; }
  .hero { min-height: 0; }
  .hero-text { gap: 28px; }
  .hero-photo { aspect-ratio: 4 / 3; min-height: 0; margin-top: 0; }
  .row > h2 { position: static; }
  .matter { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--m); }
  .matter > .lead { grid-column: 1 / -1; }
  .photos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--m); }
  .photos li:first-child img { position: static; height: auto; aspect-ratio: 2 / 1; }
  .sermons li + li { margin-top: var(--m); }
  .home .portrait, .home .side { grid-column: 1 / -1; }
}