/* ==========================================================================
   NCPC church website, site stylesheet (2026 redesign)

   Loads after ncpc-tokens.css. Every colour, space and radius comes from the
   tokens; this file never hard-codes a hex that exists there.

   The brand rules it keeps (see the ncpc-design skill): one typeface, Inter;
   no gradients; no shadows outside a modal; rules instead of boxes; the label
   gutter; one navy panel per page.

   What changed from ncpc.css: larger type and far more air, a header that
   gets out of the way, and motion. Motion is progressive. Every element is
   visible by default. Only when the page script has run (html.motion, which
   it sets only if the visitor has not asked for reduced motion) do elements
   start hidden and animate in. With scripts off, or reduced motion on, the
   page simply renders.
   ========================================================================== */

:root {
  --pad: clamp(20px, 5vw, 56px);         /* side gutter, fluid              */
  --hh: 72px;                            /* header height, measured by JS   */
  --ease: cubic-bezier(.2, .7, .1, 1);   /* long, soft landing              */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --sec: clamp(64px, 9vw, 128px);        /* section rhythm                  */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 24px); }
body {
  margin: 0; background: var(--ncpc-paper); color: var(--ncpc-ink);
  font-family: var(--ncpc-font-text); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
main { display: block; }
:where(a) {
  color: var(--ncpc-blue); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .2s, text-decoration-color .2s;
}
:where(a):hover { color: var(--ncpc-blue-deep); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ncpc-blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ncpc-blue-soft); color: var(--ncpc-ink); }
b, strong { font-weight: 700; }
code { font-size: .92em; }

.n-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; }
.n-skip:focus { left: 16px; background: var(--ncpc-ink); color: var(--ncpc-white);
  padding: 10px 14px; border-radius: var(--ncpc-r-sm); text-decoration: none; }

/* --- Layout --------------------------------------------------------------- */
.n-wrap { width: 100%; max-width: calc(var(--ncpc-measure-page) + 2 * var(--pad));
  margin-inline: auto; padding-inline: var(--pad); }
.n-read { max-width: var(--ncpc-measure-read); }
.n-section { padding-block: var(--sec); }
.n-section.n-wrap, .n-section.n-read { margin-inline: auto; }
/* The page introduction: the first wrap in <main>. */
main > .n-wrap:first-child { padding-top: clamp(56px, 9vw, 132px); }
.n-grid { display: grid; gap: var(--ncpc-s6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.n-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 640px) { .n-grid--2 { grid-template-columns: 1fr; } }
.n-stack > * + * { margin-top: var(--ncpc-s4); }
.n-mt0 { margin-top: 0 !important; }
.n-center { text-align: center; }
.n-nowrap { white-space: nowrap; }

/* --- Type ----------------------------------------------------------------- */
.n-display, .n-h1, .n-h2, .n-h3 {
  margin: 0; font-family: var(--ncpc-font-text); font-weight: 700;
  color: var(--ncpc-ink); font-optical-sizing: auto; text-wrap: balance;
}
.n-display { font-size: clamp(42px, 5.8vw, 84px); line-height: .96;
  letter-spacing: var(--ncpc-tracking-display); }
.n-h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02;
  letter-spacing: var(--ncpc-tracking-display); }
.n-h2 { font-size: clamp(26px, 2.7vw, 36px); line-height: 1.1;
  letter-spacing: var(--ncpc-tracking-title); }
.n-h3 { font-size: 20px; line-height: 1.2; letter-spacing: var(--ncpc-tracking-title); }
.n-display em, .n-h1 em, .n-h2 em { font-style: normal; color: var(--ncpc-blue); }
.n-eyebrow { margin: 0; font-size: 11px; font-weight: 700; line-height: 1.3;
  letter-spacing: var(--ncpc-tracking-eyebrow); text-transform: uppercase;
  color: var(--ncpc-mute); }
.n-eyebrow--blue { color: var(--ncpc-blue); }
.n-lede { margin: 26px 0 0; max-width: 52ch; font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.5; color: var(--ncpc-slate); text-wrap: pretty; }
.n-body { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62;
  color: var(--ncpc-ink); text-wrap: pretty; }
.n-small { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ncpc-mute); }
.n-micro { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; }
.n-tick { width: 148px; height: var(--ncpc-rule-accent); background: var(--ncpc-blue);
  border-radius: 1px; }

/* --- Rules ---------------------------------------------------------------- */
.n-rule { border: 0; height: 1px; background: var(--ncpc-line);
  margin: clamp(40px, 6vw, 80px) 0; }
.n-rule--major { height: var(--ncpc-rule-major); background: var(--ncpc-ink);
  margin-top: clamp(44px, 6vw, 88px); transform-origin: left center; }
.n-rule--faint { background: var(--ncpc-hairline); margin: 32px 0; }

/* --- Buttons -------------------------------------------------------------- */
.n-btn {
  --bg: var(--ncpc-ink); --fg: var(--ncpc-white); --bd: var(--bg);
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 22px; margin: 4px 10px 4px 0;
  border: 1.5px solid var(--bd); border-radius: var(--ncpc-r-md);
  background: var(--bg); color: var(--fg);
  font: 600 15px/1.2 var(--ncpc-font-text); letter-spacing: -.005em;
  text-decoration: none; vertical-align: middle; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.n-btn::after {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.n-btn:hover { --bg: var(--ncpc-slate); color: var(--fg); text-decoration: none; }
.n-btn:hover::after { transform: translateX(4px); }
.n-btn--primary { --bg: var(--ncpc-blue); }
.n-btn--primary:hover { --bg: var(--ncpc-blue-deep); }
.n-btn--ghost { --bg: transparent; --fg: var(--ncpc-ink); --bd: var(--ncpc-ink); }
.n-btn--ghost:hover { --bg: var(--ncpc-ink); --fg: var(--ncpc-white); --bd: var(--ncpc-ink); }
.n-btn--danger { --bg: var(--ncpc-need); }
.n-btn--onnavy { --bg: var(--ncpc-white); --fg: var(--ncpc-navy); --bd: var(--ncpc-white); }
.n-btn--onnavy:hover { --bg: var(--ncpc-blue-soft); --bd: var(--ncpc-blue-soft); }
.n-btn--onnavy-ghost { --bg: transparent; --fg: var(--ncpc-white);
  --bd: color-mix(in srgb, var(--ncpc-white) 50%, transparent); }
.n-btn--onnavy-ghost:hover { --bg: transparent; --bd: var(--ncpc-white); }
.n-btn--lg { min-height: 54px; padding: 0 24px 0 26px; font-size: 16px; }
.n-btn:disabled, .n-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* --- Chips, pills, status ------------------------------------------------- */
.n-chip { display: inline-flex; align-items: center; margin: 0;
  background: var(--ncpc-blue); color: var(--ncpc-white);
  font-weight: 700; font-size: 15px; letter-spacing: -.012em;
  padding: 10px 18px; border-radius: var(--ncpc-r-md); }
.n-chip--lg { font-size: 17px; padding: 12px 22px; }
.n-pill { display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: var(--ncpc-tracking-pill); text-transform: uppercase;
  padding: 4px 8px; border-radius: var(--ncpc-r-pill);
  background: var(--ncpc-hairline); color: var(--ncpc-slate); }
.n-pill--blue { background: var(--ncpc-blue-soft); color: var(--ncpc-blue-deep); }
.n-pill--moss { background: var(--ncpc-moss-soft); color: var(--ncpc-moss); }
.n-pill--clay { background: var(--ncpc-clay-soft); color: var(--ncpc-clay); }
.n-pill--ochre { background: var(--ncpc-ochre-soft); color: var(--ncpc-ink); }
.n-pill--teal { background: var(--ncpc-teal-soft); color: var(--ncpc-teal); }
.n-pill--plum { background: var(--ncpc-hairline); color: var(--ncpc-plum); }
.n-status { font-size: 13px; font-weight: 700; }
.n-status--need { color: var(--ncpc-need); }
.n-status--met { color: var(--ncpc-met); }

/* --- The label gutter -----------------------------------------------------
   The label is the section's heading, so it is set as one: large, bold,
   sentence case, the way the home page sets "Sunday". A small uppercase tag
   here was the hardest text on the site to read. */
.n-row { display: grid; grid-template-columns: minmax(170px, 380px) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 72px); align-items: start; }
.n-row > .n-row-label {
  position: sticky; top: calc(var(--hh) + 28px); margin: 0;
  font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; line-height: 1.1;
  letter-spacing: var(--ncpc-tracking-title); color: var(--ncpc-ink);
  text-wrap: balance; transition: top .45s var(--ease);
}
html.hdr-hidden .n-row > .n-row-label { top: 28px; }
.n-row > .n-row-label span { display: block; margin-top: 10px; font-size: 16px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0; color: var(--ncpc-mute); }
.n-row > .n-row-body { min-width: 0; }
/* Reading width (David, 2026-09-30): the label column is wider and running
   text in a row stops at about 62 characters, so lines stay easy to read
   while the page keeps its full width. Tables, grids and figures still use
   the whole column. */
.n-row > .n-row-body > p, .n-row > .n-row-body > ul, .n-row > .n-row-body > ol { max-width: 62ch; }
@media (max-width: 760px) {
  .n-row { grid-template-columns: 1fr; gap: 18px; }
  .n-row > .n-row-label { position: static; }
}

/* --- Fact lists -----------------------------------------------------------
   Term and description share a baseline. The term is bold ink at reading
   size. .n-facts--big is for terms that are numbers, times or years: they
   take the large numerals of the home page's Sunday schedule, with any
   word that goes with them (a month, a unit) in a smaller line beneath. */
.n-facts { margin: 0; }
.n-fact { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr);
  align-items: baseline; gap: 6px 26px; padding: 20px 0; border-bottom: 1px solid var(--ncpc-line); }
.n-fact:first-child { padding-top: 4px; }
.n-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.n-fact dt { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--ncpc-ink);
  font-variant-numeric: tabular-nums; }
.n-fact dd { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.n-facts--big .n-fact { padding: clamp(20px, 2.2vw, 28px) 0; }
.n-facts--big .n-fact:first-child { padding-top: 8px; }
.n-facts--big .n-fact:last-child { padding-bottom: 0; }
.n-facts--big .n-fact dt { font-size: clamp(32px, 3.2vw, 46px); line-height: 1;
  letter-spacing: var(--ncpc-tracking-display); }
.n-facts--big .n-fact dt small { display: block; margin-top: 10px; font-size: 15px; font-weight: 600;
  line-height: 1.3; letter-spacing: 0; color: var(--ncpc-mute); }
.n-facts--narrow .n-fact { grid-template-columns: clamp(48px, 6vw, 84px) minmax(0, 1fr); }
@media (max-width: 520px) {
  .n-fact { grid-template-columns: 1fr; }
  .n-facts--big .n-fact dt small { display: inline; margin: 0 0 0 6px; }
}

.n-list { list-style: none; margin: 0; padding: 0; }
.n-item { padding: 18px 0; border-bottom: 1px solid var(--ncpc-line); }
.n-item-top { display: flex; align-items: baseline; gap: 12px; }
.n-item-title { font-weight: 700; font-size: 17px; }
.n-item-meta { margin-left: auto; font-size: 13px; color: var(--ncpc-mute); }
.n-item-desc { margin-top: 4px; font-size: 15px; color: var(--ncpc-mute); }
.n-group-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px;
  margin: clamp(48px, 6vw, 72px) 0 8px; padding-bottom: 14px;
  border-bottom: var(--ncpc-rule-major) solid var(--ncpc-ink); }
.n-group-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700;
  letter-spacing: var(--ncpc-tracking-title); }
.n-group-head span { font-size: 15px; color: var(--ncpc-mute); }
.n-name { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: var(--ncpc-r-sm); background: var(--ncpc-hairline); font-size: 14px; }
.n-name--mine { background: var(--ncpc-blue-soft); }
.n-name button { border: 0; background: none; cursor: pointer; color: var(--ncpc-mute); }
.n-name button:hover { color: var(--ncpc-need); }

/* --- Photographs ---------------------------------------------------------- */
.n-photo { display: block; width: 100%; height: auto;
  border-radius: var(--ncpc-r-lg); background: var(--ncpc-card); }
.n-photo--wide { aspect-ratio: 21 / 9; object-fit: cover; }
.n-photo--tall { aspect-ratio: 4 / 3; object-fit: cover; }
.n-photo-cap { margin: 14px 0 0; font-size: 15px; line-height: 1.45; color: var(--ncpc-mute); }
@media (max-width: 640px) { .n-photo--wide { aspect-ratio: 4 / 3; } }

/* --- The one navy panel --------------------------------------------------- */
.n-panel { background: var(--ncpc-navy); color: var(--ncpc-pale);
  border-radius: var(--ncpc-r-lg); padding: clamp(36px, 6.5vw, 96px); }
.n-panel h2, .n-panel h3 { color: var(--ncpc-white); }
.n-panel .n-h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.04;
  letter-spacing: var(--ncpc-tracking-display); }
.n-panel em { font-style: normal; color: var(--ncpc-sky); }
.n-panel b { color: var(--ncpc-white); }
.n-panel p { color: var(--ncpc-pale); font-size: 17px; line-height: 1.55; max-width: 60ch; }
.n-panel .n-eyebrow { color: var(--ncpc-sky); }
.n-panel a:not(.n-btn) { color: var(--ncpc-white); }
.n-panel-grid { display: grid; grid-template-columns: minmax(130px, 230px) minmax(0, 1fr);
  gap: 20px clamp(28px, 5vw, 72px); }
.n-panel-grid > .lab { padding-top: 12px; }
.n-panel-grid > .lab .n-eyebrow { font-size: 18px; line-height: 1.3; letter-spacing: -.005em;
  text-transform: none; }
@media (max-width: 760px) {
  .n-panel-grid { grid-template-columns: 1fr; }
  .n-panel-grid > .lab { padding-top: 0; }
}

/* --- Illustration well ---------------------------------------------------- */
.n-art { background: var(--ncpc-card); border: 1px solid var(--ncpc-hairline);
  border-radius: var(--ncpc-r-md); padding: var(--ncpc-s4) var(--ncpc-s4) var(--ncpc-s2); }
.n-art svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- Forms ---------------------------------------------------------------- */
.n-field { display: grid; gap: 8px; margin-top: 20px; }
.n-label { font-size: 12px; font-weight: 700; letter-spacing: .10em;
  text-transform: uppercase; color: var(--ncpc-slate); }
.n-input { width: 100%; min-height: 50px; padding: 12px 14px;
  font: 16px/1.4 var(--ncpc-font-text); color: var(--ncpc-ink);
  background: var(--ncpc-white); border: 1px solid var(--ncpc-border);
  border-radius: var(--ncpc-r-sm); transition: border-color .2s; }
.n-input:hover { border-color: var(--ncpc-quiet); }
.n-input:focus { outline: 2px solid var(--ncpc-blue); outline-offset: -1px;
  border-color: var(--ncpc-blue); }
textarea.n-input { min-height: 150px; resize: vertical; }
.n-help { margin: 0; font-size: 13.5px; color: var(--ncpc-mute); }
.n-error { margin: 0; font-size: 14px; font-weight: 600; color: var(--ncpc-need); }

dialog.n-modal { border: 0; padding: 0; border-radius: var(--ncpc-r-lg);
  box-shadow: var(--ncpc-shadow-modal); max-width: min(560px, 92vw); }
dialog.n-modal::backdrop { background: color-mix(in srgb, var(--ncpc-navy) 45%, transparent); }
.n-modal-body { padding: 32px; }

/* --- Header --------------------------------------------------------------- */
.n-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ncpc-paper) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .3s, background-color .3s;
  view-transition-name: site-header;
}
.n-header.is-scrolled { border-bottom-color: var(--ncpc-line);
  background: color-mix(in srgb, var(--ncpc-paper) 92%, transparent); }
.n-header.is-hidden { transform: translateY(-100%); }
.n-brandbar { display: flex; align-items: center; gap: 22px; min-height: 72px; }
.n-brandbar > a:first-child { flex: 0 0 auto; }
.n-brandbar > a:first-child img { height: 30px; width: auto; }
.n-brandbar-note { padding-left: 22px; border-left: 1px solid var(--ncpc-line);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ncpc-mute); white-space: nowrap; }
.n-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.n-nav > a, .n-nav-group > a {
  position: relative; display: inline-flex; align-items: center; height: 40px;
  padding: 0 13px; font-size: 15px; font-weight: 500; color: var(--ncpc-ink);
  text-decoration: none; white-space: nowrap;
}
.n-nav > a::after, .n-nav-group > a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 7px; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease);
}
.n-nav > a:hover::after, .n-nav-group:hover > a::after,
.n-nav-group:focus-within > a::after, .n-nav a[aria-current="page"]::after { transform: scaleX(1); }
.n-nav > a:hover, .n-nav-group > a:hover { color: var(--ncpc-ink); }
.n-nav > a[aria-current="page"], .n-nav-group > a[aria-current="page"] { color: var(--ncpc-blue); }
.n-nav-group { position: relative; }
.n-nav-sub { position: absolute; top: 100%; left: -6px; padding-top: 10px; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.n-nav-group:hover .n-nav-sub, .n-nav-group:focus-within .n-nav-sub {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.n-nav-sub-inner { display: grid; min-width: 230px; padding: 8px;
  background: var(--ncpc-paper); border: 1px solid var(--ncpc-line);
  border-radius: var(--ncpc-r-md); }
.n-nav-sub a { padding: 10px 12px; border-radius: var(--ncpc-r-sm); font-size: 14.5px;
  font-weight: 500; color: var(--ncpc-ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s; }
.n-nav-sub a:hover { background: var(--ncpc-hairline); color: var(--ncpc-ink); }
.n-nav-sub a[aria-current="page"] { color: var(--ncpc-blue); }
.n-memberlink { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px;
  margin-left: 6px; padding: 0 18px; border-radius: var(--ncpc-r-md);
  background: var(--ncpc-ink); color: var(--ncpc-white); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: background-color .3s var(--ease); }
.n-memberlink:hover, .n-memberlink[aria-current="page"] { background: var(--ncpc-blue);
  color: var(--ncpc-white); }
.n-menu-btn { display: none; flex: 0 0 auto; align-items: center; height: 40px;
  padding: 0 15px; border: 1.5px solid var(--ncpc-ink); border-radius: var(--ncpc-r-md);
  background: transparent; color: var(--ncpc-ink); font: 600 14px/1 var(--ncpc-font-text);
  text-decoration: none; cursor: pointer; }
@media (max-width: 1180px) { .n-brandbar-note { display: none; } }
@media (max-width: 980px) {
  .n-nav { display: none; }
  .n-memberlink { margin-left: auto; }
  .n-menu-btn { display: inline-flex; }
  .n-brandbar { gap: 10px; }
}
@media (max-width: 380px) { .n-brandbar > a:first-child img { height: 25px; } }

/* Section sub-nav: the pages in the family you are in. */
.n-subnav { border-top: 1px solid var(--ncpc-hairline); }
.n-subnav .n-wrap { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.n-subnav .n-wrap::-webkit-scrollbar { display: none; }
.n-subnav a { position: relative; flex: 0 0 auto; padding: 14px 0 13px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ncpc-mute); text-decoration: none; }
.n-subnav a:hover { color: var(--ncpc-ink); }
.n-subnav a[aria-current="page"] { color: var(--ncpc-ink); }
.n-subnav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -1px; height: 2px; background: var(--ncpc-blue); }

/* Phone menu: full screen, large type. */
.n-menu { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  padding: 0 var(--pad) 48px; overflow-y: auto; background: var(--ncpc-paper);
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.n-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.n-menu-top { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 72px; }
.n-menu-top img { height: 30px; width: auto; }
.n-menu-list { list-style: none; margin: 18px 0 0; padding: 0; }
.n-menu-list > li { border-bottom: 1px solid var(--ncpc-line); }
.n-menu-list > li > a { display: block; padding: 18px 0 16px; font-size: clamp(28px, 8vw, 40px);
  font-weight: 700; letter-spacing: var(--ncpc-tracking-display); line-height: 1.05;
  color: var(--ncpc-ink); text-decoration: none; }
.n-menu-list > li > a[aria-current="page"] { color: var(--ncpc-blue); }
.n-menu-sub { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 20px; }
.n-menu-sub a { font-size: 15.5px; color: var(--ncpc-slate); text-decoration: none; }
.n-menu-sub a[aria-current="page"] { color: var(--ncpc-blue); font-weight: 600; }
.n-menu-foot { margin-top: auto; padding-top: 36px; font-size: 14px; color: var(--ncpc-mute); }
.n-menu-foot p { margin: 4px 0 0; }
body.menu-open { overflow: hidden; }

/* --- Footer --------------------------------------------------------------- */
.n-footer { background: var(--ncpc-navy); color: var(--ncpc-pale);
  padding: clamp(64px, 9vw, 120px) 0 36px; font-size: 16px; line-height: 1.6; }
.n-footer img { height: 34px; width: auto; }
.n-footer a { color: var(--ncpc-white); text-decoration: none; }
.n-footer a:hover { color: var(--ncpc-white); text-decoration: underline; }
.n-footer .n-micro { font-size: 17px; letter-spacing: -.005em; text-transform: none;
  color: var(--ncpc-white); }
.n-footer p { margin: 8px 0 0; }
.n-footer-top { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px 48px; flex-wrap: wrap; }
.n-footer-tag { margin: 0; font-size: clamp(24px, 3vw, 38px); font-weight: 700;
  letter-spacing: var(--ncpc-tracking-display); line-height: 1.08; color: var(--ncpc-white); }
.n-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px;
  border-top: 1px solid var(--ncpc-navy-2); }
.n-footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: 22px;
  border-top: 1px solid var(--ncpc-navy-2); font-size: 14px; color: var(--ncpc-sky); }
@media (max-width: 860px) { .n-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .n-footer-grid { grid-template-columns: 1fr; } }

/* --- Home: hero -------------------------------------------------------------
   Type on paper with nothing behind it. The photograph that follows carries
   the weight, so the headline never competes with an image for contrast. */
.n-hero-inner { padding-block: clamp(64px, 9vw, 136px) clamp(44px, 5vw, 76px); }
.n-hero .n-display { font-size: clamp(50px, 7.2vw, 112px); }
.n-hero .n-lede { max-width: 50ch; }
.n-hero-actions { margin-top: 30px; }
/* The decisive fact, set as text: an earlier chip read as a button. */
.n-hero-when { margin: clamp(26px, 3vw, 38px) 0 0; font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; color: var(--ncpc-ink); }
.n-hero-when::before { content: ""; display: inline-block; vertical-align: middle;
  width: 28px; height: 2px; margin: -3px 12px 0 0; background: var(--ncpc-blue); }

/* --- The stage --------------------------------------------------------------
   A real photograph at full width. It enters inset to the page's measure with
   rounded corners and opens to the edges of the screen as it scrolls into
   view, while the picture drifts a little inside its frame. The motion is
   tied to the reader's scrolling, not to a clock, so nothing moves on its
   own. Without scroll-linked animation, or with reduced motion, it is simply
   a full-width photograph. */
main { overflow-x: clip; }
.n-stage { margin: 0; overflow: hidden; background: var(--ncpc-card); }
.n-stage img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.n-stage-cap { margin-top: 14px; }
@media (max-width: 640px) { .n-stage img { aspect-ratio: 4 / 3; } }
@supports (animation-timeline: view()) {
  html.motion .n-stage { animation: n-stage-open linear both;
    animation-timeline: view(); animation-range: entry 0% cover 45%; }
  html.motion .n-stage img { animation: n-stage-drift linear both;
    animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes n-stage-open {
  from { clip-path: inset(0 max(var(--pad), calc((100% - var(--ncpc-measure-page)) / 2)) round var(--ncpc-r-lg)); }
  to   { clip-path: inset(0 0 round 0); }
}
@keyframes n-stage-drift {
  from { transform: scale(1.1) translateY(-2.5%); }
  to   { transform: scale(1.02) translateY(2.5%); }
}

/* --- Home: Sunday ---------------------------------------------------------------
   A real heading, the address under it, and the morning as a schedule:
   each time on the same line as what happens, rules between. */
.n-section-title { font-size: clamp(44px, 6vw, 84px); line-height: .98; text-wrap: balance; }
.n-sunday { display: grid; grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 32px clamp(32px, 6vw, 104px); align-items: start; }
.n-sunday-where { margin: 20px 0 0; font-size: 17px; line-height: 1.5; color: var(--ncpc-slate); }
.n-schedule { list-style: none; margin: 0; padding: 0; border-top: var(--ncpc-rule-major) solid var(--ncpc-ink); }
.n-schedule li { display: grid; grid-template-columns: clamp(118px, 12vw, 190px) minmax(0, 1fr);
  align-items: baseline; gap: 12px 24px; padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--ncpc-line); }
.n-schedule-at { font-size: clamp(34px, 3.6vw, 52px); font-weight: 700; line-height: 1;
  letter-spacing: var(--ncpc-tracking-display); font-variant-numeric: tabular-nums; color: var(--ncpc-ink); }
.n-schedule-what { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.4; color: var(--ncpc-slate); }
@media (max-width: 860px) { .n-sunday { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .n-schedule li { grid-template-columns: 1fr; gap: 8px; } }

/* Two photographs side by side; the second sits a little lower. */
@media (min-width: 641px) { .n-offset { margin-top: clamp(40px, 7vw, 110px); } }

/* --- The four pillars ----------------------------------------------------------
   A photograph each, the accent bar, the name and one line. The whole card
   is one link: the title's, stretched over the card, so a screen reader
   hears it once. */
.n-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(24px, 3.2vw, 48px); }
@media (min-width: 761px) { .n-pillars--stagger > :nth-child(even) { margin-top: clamp(56px, 8vw, 128px); } }
@media (max-width: 560px) { .n-pillars { grid-template-columns: 1fr; } }
.n-pillar { position: relative; scroll-margin-top: calc(var(--hh) + 32px); }
.n-pillar-media { overflow: hidden; border-radius: var(--ncpc-r-lg); background: var(--ncpc-card); }
.n-pillar-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; }
html.motion .n-pillar-media img { transition: transform 1.4s var(--ease), clip-path 1.3s var(--ease-io); }
html.motion .n-pillar:hover .n-pillar-media img { transform: scale(1.035); }
.n-pillar > h3 { margin-top: 26px; font-size: clamp(20px, 1.9vw, 25px); }
.n-pillar > h3::before, .n-pillar--full > div > .n-h3::before { content: ""; display: block;
  width: 42px; height: var(--ncpc-rule-accent); margin-bottom: 16px; border-radius: 2px;
  background: var(--ncpc-stone); }
.n-pillar[data-accent="clay"] h3::before { background: var(--ncpc-clay); }
.n-pillar[data-accent="ochre"] h3::before { background: var(--ncpc-ochre); }
.n-pillar[data-accent="teal"] h3::before { background: var(--ncpc-teal); }
.n-pillar[data-accent="moss"] h3::before { background: var(--ncpc-moss); }
.n-pillar > h3 a { color: var(--ncpc-ink); text-decoration: none; transition: color .25s; }
.n-pillar > h3 a::after { content: ""; position: absolute; inset: 0; }
.n-pillar:hover > h3 a { color: var(--ncpc-blue); }
.n-pillar > .n-small { margin-top: 8px; max-width: 46ch; font-size: 15.5px; }
.n-pillar-img { aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: var(--ncpc-s4); }
.n-pillar--full { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 20px clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 700px) { .n-pillar--full { grid-template-columns: 1fr; } }

/* --- About: purpose, mission, beliefs ------------------------------------------ */
.n-creed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px); }
.n-creed > div { padding-top: 22px; border-top: var(--ncpc-rule-major) solid var(--ncpc-ink); }
.n-creed-label { margin: 0; font-family: var(--ncpc-font-text);
  font-size: clamp(34px, 4vw, 54px); font-weight: 700; line-height: 1;
  letter-spacing: var(--ncpc-tracking-display); color: var(--ncpc-ink); }
.n-creed-body { margin: 18px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45;
  font-weight: 500; letter-spacing: -.01em; color: var(--ncpc-slate); max-width: 34ch; }
@media (max-width: 860px) { .n-creed { grid-template-columns: 1fr; } }

/* --- At-home guide ------------------------------------------------------------- */
.n-qa { padding: 18px 0; border-bottom: 1px solid var(--ncpc-hairline); }
.n-qa:first-child { padding-top: 0; }
.n-qa:last-child { border-bottom: 0; padding-bottom: 0; }
.n-qa-q { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ncpc-ink); }
.n-qa-a { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--ncpc-mute); }
.n-qa-a b { margin-right: 8px; font-size: 11px; font-weight: 700;
  letter-spacing: var(--ncpc-tracking-eyebrow); text-transform: uppercase; color: var(--ncpc-quiet); }
.n-verse { margin: 0; padding-left: 24px; border-left: var(--ncpc-rule-accent) solid var(--ncpc-blue);
  font-size: clamp(21px, 2vw, 26px); font-weight: 600; line-height: 1.4;
  letter-spacing: var(--ncpc-tracking-title); color: var(--ncpc-ink); }
.n-embed { position: relative; aspect-ratio: 16 / 9; max-width: var(--ncpc-measure-read);
  overflow: hidden; border-radius: var(--ncpc-r-lg); background: var(--ncpc-card); }
.n-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.n-guide { display: flex; align-items: baseline; gap: 22px; padding: 18px 0;
  border-bottom: 1px solid var(--ncpc-line); }
.n-guide:last-child { border-bottom: 0; }
.n-guide-n { flex: 0 0 48px; font-size: 13px; font-weight: 700; color: var(--ncpc-blue);
  font-variant-numeric: tabular-nums; }
.n-guide-main { flex: 1; min-width: 0; }
.n-guide-title { font-size: 18px; font-weight: 700; letter-spacing: -.015em;
  color: var(--ncpc-ink); text-decoration: none; }
.n-guide-title:hover { color: var(--ncpc-blue); }
.n-guide-meta { margin-top: 4px; font-size: 14px; color: var(--ncpc-mute); }
.n-guide-date { flex: 0 0 auto; font-size: 13px; color: var(--ncpc-mute); white-space: nowrap; }
@media (max-width: 640px) {
  .n-guide { flex-wrap: wrap; gap: 6px 14px; }
  .n-guide-date { flex-basis: 100%; padding-left: 62px; }
}
.n-stepper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.n-stepper > * { flex: 1 1 0; min-width: 0; }
.n-stepper .is-next { text-align: right; }

/* --- Motion --------------------------------------------------------------------
   Page introduction: each block rises in turn, the headline rises line by
   line from behind a mask, and the heavy rule draws across. */
html.motion main > .n-wrap:first-child > :not(.n-display):not(.n-rule),
html.motion .n-hero-inner > :not(.n-display) {
  animation: n-rise 1s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms + 140ms);
}
html.motion main > .n-wrap:first-child > .n-rule--major {
  animation: n-draw-x 1.3s var(--ease-io) both; animation-delay: 420ms;
}
.n-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.n-line > span { display: block; }
html.motion .n-display .n-line > span {
  animation: n-line-up 1.15s var(--ease) both;
  animation-delay: calc(var(--l, 0) * 120ms + 160ms);
}
@keyframes n-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes n-line-up { from { transform: translateY(108%); } }
@keyframes n-draw-x { from { transform: scaleX(0); } }

/* A split headline stays hidden only until the script has split it, and
   shows itself after a moment regardless, so a script failure can never
   leave a page without its headline. */
html.motion main .n-display:not(.is-split) { opacity: 0; animation: n-show 0s linear 1.2s forwards; }
@keyframes n-show { to { opacity: 1; } }

/* Scroll reveals: blocks fade up once as they enter the viewport. */
html.motion .rv { opacity: 0; transform: translateY(34px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--rd, 0) * 1ms); }
html.motion .rv.in { opacity: 1; transform: none; }
/* Photographs open from the bottom edge instead, settling as they do. */
html.motion img.n-photo.rv { opacity: 1; transform: scale(1.06);
  clip-path: inset(100% 0 0 0 round var(--ncpc-r-lg));
  transition: clip-path 1.3s var(--ease-io), transform 1.8s var(--ease); }
html.motion img.n-photo.rv.in { transform: none; clip-path: inset(0 0 0 0 round var(--ncpc-r-lg)); }
/* The phone menu opens without scripts too: the Menu link targets it. */
.n-menu:target { opacity: 1; visibility: visible; transition-delay: 0s; }
html.motion .n-menu-list > li { opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .7s var(--ease); }
html.motion .n-menu.is-open .n-menu-list > li, html.motion .n-menu:target .n-menu-list > li {
  opacity: 1; transform: none; transition-delay: calc(80ms + var(--i, 0) * 50ms); }

/* Page to page: a short cross-fade where the browser supports it. The header
   is named, so it holds still while the page beneath it changes. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

/* The small label above each page's headline is ink: it is the thinnest
   text on the page and carries where you are. */
main > .n-wrap:first-child > .n-eyebrow, .n-hero-inner > .n-eyebrow { color: var(--ncpc-ink); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  .n-header, .n-nav-sub, .n-menu, .n-btn, .n-btn::after { transition: none; }
}

@media print {
  .n-header, .n-menu { display: none !important; }
  .rv, .rv * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .n-stage, .n-stage img { animation: none !important; clip-path: none !important; transform: none !important; }
}

/* Form status lines ("Sending...", "A link is on its way") written after a
   button drop to their own line under it instead of wrapping beside it, and
   take no space while empty. */
.n-btn + .n-help { display: block; margin-top: 10px; }
.n-btn + .n-help:empty { display: none; }