/* WEB-01 website modernization (14 October 2026). Architectural Truth, Quiet Stewardship: the building is the subject,
   text sits on structural plates rather than over the photograph, and rules carry the structure instead of card chrome. */

/* hero: one wide architectural photograph; the headline sits on a navy plate that overlaps its lower edge */
.w-hero { padding: clamp(1rem, 3vw, 2.5rem) 0 0; background: var(--paper); }
.w-hero-frame { position: relative; }
.w-hero-photo img { display: block; width: 100%; height: clamp(18rem, 46vw, 36rem); object-fit: cover; border-radius: var(--radius); }
.w-hero-plate { position: relative; margin: -6rem 0 0 clamp(0rem, 4vw, 3rem); max-width: 40rem; background: var(--logo-navy); color: #FFFFFF;
  padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: var(--lift); }
.w-hero-plate h1 { color: #FFFFFF; font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.9rem; max-width: 16ch; }
.w-hero-plate p { color: #DCE7EE; font-size: 1.125rem; line-height: 1.55; margin: 0 0 1.4rem; max-width: 52ch; }
.w-hero-plate .btn-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.w-hero-plate .btn-secondary { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.w-hero-plate .btn-secondary:hover { background: #FFFFFF; color: var(--logo-navy); }
.w-hero-plate .w-hero-fine { font-size: 0.9375rem; color: #B9CBD6; margin: 1rem 0 0; }

/* where to begin: four entry points separated by vertical rules, not cards */
.w-begin { padding: var(--rhythm) 0 calc(var(--rhythm) * 0.6); }
.w-begin h2, .w-paths h2, .w-trust h2 { margin: 0 0 0.5rem; }
.w-begin .lede { margin: 0 0 1.75rem; }
.w-entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--rule-strong); }
.w-entry { position: relative; padding: 1.25rem 1.25rem 1.5rem; border-left: 1px solid var(--rule); }
.w-entry:first-child { border-left: 0; padding-left: 0; }
.w-entry:last-child { padding-right: 0; }
.w-entry img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-control); }
.w-entry h3 { font-size: 1.25rem; margin: 1rem 0 0.4rem; }
.w-entry h3 a { color: var(--ink); text-decoration: none; }
.w-entry h3 a::after { content: ""; position: absolute; inset: 0; }
.w-entry p { margin: 0 0 0.75rem; color: var(--body); line-height: 1.55; }
.w-entry .w-go { color: var(--action); font-weight: 600; }
.w-entry:hover h3 a, .w-entry:focus-within h3 a { text-decoration: underline; }
.w-entry:focus-within { outline: 3px solid var(--focus-ring, #0A6C8A); outline-offset: 4px; border-radius: var(--radius-control); }
.w-entry h3 a:focus-visible { outline: none; }

/* who it is for: a plain ruled list of starting points */
.w-paths { padding: calc(var(--rhythm) * 0.6) 0 var(--rhythm); }
.w-path-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); }
.w-path { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.w-path dt, .w-path .w-path-who { font-family: var(--font-display); font-weight: 650; color: var(--ink); }
.w-path p { margin: 0 0 0.35rem; color: var(--body); }
.w-path a { font-weight: 600; }

/* conditions chain: one photograph per condition, captioned as an illustration */
.ba-chain .w-cond-photo img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-control); margin: 0 0 0.9rem; }
.w-illustration { font-size: 0.875rem; color: var(--muted); margin: 0.75rem 0 0; }

/* trust */
.w-trust { padding: var(--rhythm) 0; }
.w-trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin: 1.5rem 0 1.25rem; padding: 0; list-style: none; }
.w-trust-list li { border-top: 2px solid var(--logo-teal); padding-top: 1rem; }
.w-trust-list h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.w-trust-list p { margin: 0; color: var(--body); line-height: 1.55; }

/* page photo figures (organizations, tools, almanac) */
.w-figure { margin: 0; }
.w-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.w-figure figcaption { font-size: 0.9375rem; color: var(--muted); margin-top: 0.6rem; max-width: 60ch; }
.w-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }

@media (max-width: 61.99rem) {
  .w-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-entry:nth-child(3) { border-left: 0; padding-left: 0; }
  .w-entry:nth-child(2) { padding-right: 0; }
  .w-entry:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .w-path-list { grid-template-columns: 1fr; }
  .w-trust-list { grid-template-columns: 1fr; }
  .w-split { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .w-hero { padding-top: 0; }
  .w-hero-photo img { height: 15rem; border-radius: 0; }
  .w-hero .shell-wide { width: 100%; }
  .w-hero-plate { margin: -2.5rem 1rem 0; padding: 1.25rem; }
  .w-hero-plate h1 { font-size: 1.875rem; }
  .w-hero-plate p { font-size: 1rem; }
  .w-hero-plate .btn-row .btn { flex: 1 1 100%; text-align: center; }
  .w-entries { grid-template-columns: 1fr; }
  .w-entry, .w-entry:first-child, .w-entry:nth-child(3) { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1rem; padding: 1rem 0; border-left: 0; border-top: 1px solid var(--rule); }
  .w-entry:first-child { border-top: 0; }
  .w-entry picture { grid-row: span 3; }
  .w-entry img { aspect-ratio: 1 / 1; }
  .w-entry h3 { margin: 0 0 0.3rem; font-size: 1.125rem; }
  .w-entry p { font-size: 0.9375rem; margin-bottom: 0.4rem; }
  .w-path { grid-template-columns: 1fr; gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) { .w-hero * { animation: none !important; transition: none !important; } }

/* lists carry their own grid width (the base stylesheet caps every ul at the reading measure) */
ul.w-entries, ul.w-path-list, ul.w-trust-list { max-width: none; }
.w-hero { padding-bottom: 0; }
.w-hero-plate { margin-bottom: 0; }
.w-hero-plate { max-width: 46rem; }
.w-hero-plate h1 { max-width: 20ch; }
.w-entries .w-entry h3 { font-size: 1.25rem; line-height: 1.25; }
.w-entries .w-entry img { height: auto; aspect-ratio: 4 / 3; }
.w-trust-list li h3 { font-size: 1.125rem; }
@media (max-width: 40rem) { .w-entries .w-entry h3 { font-size: 1.125rem; } .w-entries .w-entry img { aspect-ratio: 1 / 1; } }
@media (min-width: 62rem) {
  .w-entries { column-gap: 0; }
  .w-entries .w-entry, .w-entries .w-entry:first-child, .w-entries .w-entry:last-child { padding: 1.25rem 1.1rem 1.5rem; }
  .w-entries .w-entry:first-child { border-left: 0; }
}
/* For organizations: three building types, captioned plainly */
.w-fo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); margin: 1.25rem 0 2rem; }
.w-fo-strip .w-figure img { aspect-ratio: 4 / 3; }
.w-fo-strip figcaption { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
@media (max-width: 40rem) { .w-fo-strip { grid-template-columns: 1fr; } .w-fo-strip .w-figure img { aspect-ratio: 16 / 9; } }
.fo-page .shell.w-split { display: grid; }
@media (max-width: 61.99rem) { .fo-page .shell.w-split { display: block; } .fo-page .shell.w-split .w-figure { margin-top: 1.5rem; } }
@media (max-width: 40rem) {
  .w-fo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .w-fo-strip .w-figure img { aspect-ratio: 1 / 1; }
  .w-fo-strip figcaption { font-size: 0.8125rem; line-height: 1.3; }
  .ba-chain .w-cond-photo img { aspect-ratio: 21 / 9; }
}

/* Founder review 14 Oct 2026: the plate sits higher on the photograph, overlapping most of it, so it reads as part of the
   hero rather than hanging below it. It still crosses the photograph's lower edge slightly. */
.w-hero-plate { margin-top: calc(-1 * clamp(11rem, 23vw, 20rem)); }
@media (max-width: 61.99rem) { .w-hero-plate { margin-top: -9rem; } }
@media (max-width: 40rem) { .w-hero-photo img { height: 17rem; } .w-hero-plate { margin-top: -6rem; } }
@media (min-width: 40.01rem) and (max-width: 61.99rem) { .w-hero-photo img { height: 30rem; } .w-hero-plate { margin-top: -15rem; } }
@media (max-width: 40rem) { .w-hero-photo img { height: 18rem; } .w-hero-plate { margin-top: -8rem; } }
@media (min-width: 62rem) and (max-width: 81.25rem) { .w-hero-plate { margin-top: -18rem; } }