/* ==========================================================================
   Arch House Australia - base
   Reset, elements, layout primitives. Components live in components.css.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--espresso);
  background: var(--plaster);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); line-height: var(--lh-tight); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { text-wrap: pretty; }
p + p { margin-top: var(--sp-3); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

ul, ol { padding-left: 1.15em; }
li + li { margin-top: var(--sp-1); }

:focus-visible {
  outline: 2px solid var(--walnut);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--sand); color: var(--espresso); }

.skip-link {
  position: absolute; left: var(--sp-3); top: -4rem;
  background: var(--espresso); color: var(--gesso);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  z-index: 999; transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.wrap   { width: min(100% - 2.5rem, var(--wrap));       margin-inline: auto; }
.wrap-t { width: min(100% - 2.5rem, var(--wrap-tight)); margin-inline: auto; }
.wrap-x { width: min(100% - 2.5rem, var(--wrap-text));  margin-inline: auto; }

.section       { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-7); }

.band-limewash { background: var(--limewash); }
.band-dark     { background: var(--espresso); color: var(--plaster); }
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--gesso); }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--espresso-soft);
  max-width: 46ch;
}
h1 + .lede, h2 + .lede, .arch-rule + .lede { margin-top: var(--sp-3); }
h2 + p, h3 + p { margin-top: var(--sp-2); }

.muted { color: var(--espresso-mute); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   The arch rule. Traced from the sweeping A of his real logo, it sits above
   every section heading. One stroke, no text, no pill, no badge.
   -------------------------------------------------------------------------- */
.arch-rule {
  width: 62px; height: 26px;
  border: 1px solid var(--sand);
  border-bottom: 0;
  border-radius: var(--arch-full);
  margin-bottom: var(--sp-3);
}
.center .arch-rule { margin-inline: auto; }
.band-dark .arch-rule { border-color: rgba(217,203,184,.45); }

/* --------------------------------------------------------------------------
   Fluted band. His slatted plinth surface. Capped at two per page.
   -------------------------------------------------------------------------- */
.flute-rule {
  height: 34px;
  background-color: var(--limewash);
  background-image: var(--flute);
  background-size: 18px 100%;
  border-block: 1px solid var(--sand);
}
.band-dark .flute-rule,
.flute-rule.is-dark {
  background-color: var(--espresso);
  background-image: var(--flute-dark);
  border-color: rgba(217,203,184,.2);
}

/* --------------------------------------------------------------------------
   Grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem,100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%), 1fr)); }

/* Pin the column count at the top end. auto-fit was resolving the six-item
   capability grid to 4 + 2, which leaves two dead cells and reads as a
   mistake. Explicit tracks give 3 + 3 and 4 across for the four-item rows. */
@media (min-width: 64rem) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

/* --------------------------------------------------------------------------
   Motion. Transform and opacity only. Never the LCP element. Zero CLS.
   -------------------------------------------------------------------------- */
/* Scoped to .js (set by assets/js/js-flag.js before first paint). Unscoped,
   a blocked or failed script left most of every page at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}