/* ---------------------------------------------------------------
   Ananias Advisory
   Navy #061936 · Cream #F6F1EB. No third colour — only opacity
   tints of these two are used for secondary text.
   --------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('/fonts/libre-franklin-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #061936;
  --cream: #F6F1EB;

  --ink-soft: rgba(6, 25, 54, 0.72);   /* secondary text on cream */
  --ink-faint: rgba(6, 25, 54, 0.62);  /* labels, numerals — 0.62 is the
                                          lightest tint that still clears
                                          WCAG AA (4.5:1) on cream */
  --rev-soft: rgba(246, 241, 235, 0.74); /* secondary text on navy */
  --rev-faint: rgba(246, 241, 235, 0.58);

  --display: 'Cormorant Garamond', Cormorant, Garamond, serif;
  --text: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.5rem, 6vw, 3rem);
  --measure: 36rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--text);
  font-size: 1.0625rem;      /* 17px */
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

.wrap {
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- links ---------------------------------------------------- */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(6, 25, 54, 0.35);
  transition: text-decoration-color 0.15s ease;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* --- shared type ---------------------------------------------- */

.label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;   /* the banner-line tracking from the identity */
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.5rem;
}

/* ===============================================================
   MASTHEAD — navy. Holds the identity and the opening claim.
   =============================================================== */

.masthead {
  background: var(--navy);
  color: var(--cream);
  padding-block: clamp(4.5rem, 11vw, 7.5rem) clamp(2.5rem, 5vw, 3.25rem);
}

.masthead a { text-decoration-color: rgba(246, 241, 235, 0.4); }
.masthead :focus-visible,
.site-footer :focus-visible { outline-color: var(--cream); }

/* Lockup — live type, per the brand specs.
   Wordmark tracking 0.26em, ADVISORY 0.62em at 0.258em of the
   wordmark size. The negative right margins cancel the trailing
   letterspace so the optical right edge is true.
   ADVISORY's baseline sits 0.659em (of the wordmark size) below
   the wordmark's baseline, matching the lockup artwork. */
.lockup {
  font-family: var(--display);
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 clamp(2.75rem, 7vw, 4.25rem);
}

.lockup__name {
  display: block;
  font-size: clamp(1.75rem, 6.4vw, 2.875rem);
  line-height: 1;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
}

.lockup__sub {
  display: block;
  font-size: 0.258em;
  line-height: 1;
  letter-spacing: 0.62em;
  margin-right: -0.62em;
  margin-top: 1.032em;   /* derived from the font's own metrics */
}

.positioning {
  max-width: 30rem;
  color: var(--rev-soft);
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(3.5rem, 9vw, 5.5rem);
}

/* The one deliberate move on the page: the opening statement
   begins here, in the display face on navy, and finishes in the
   cream reading field below. */
.claim {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 5.6vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: 0.005em;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}

/* ===============================================================
   ARGUMENT — cream. The sentence continues.
   =============================================================== */

.argument {
  padding-block: clamp(2.5rem, 5vw, 3.25rem) clamp(3.5rem, 9vw, 5.5rem);
}

.bridge {
  font-size: clamp(1.125rem, 2.6vw, 1.3125rem);
  line-height: 1.56;
  letter-spacing: -0.002em;
}

/* ===============================================================
   PRACTICE
   =============================================================== */

.practice {
  padding-bottom: clamp(3rem, 8vw, 5rem);
}

.service {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;   /* numeral sits on the heading's baseline */
  margin-bottom: clamp(2.25rem, 5vw, 3rem);
}
.service:last-child { margin-bottom: 0; }

/* Specificity note: this must outrank `.service p` below, which would
   otherwise drag the numeral into the text column. */
.service .service__num {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

.service h2 {
  grid-column: 2;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.375rem, 3.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin: 0 0 0.5rem;
}

.service p {
  grid-column: 2;
  color: var(--ink-soft);
  margin: 0;
}

/* ===============================================================
   ABOUT
   =============================================================== */

.about {
  padding-bottom: clamp(3.5rem, 9vw, 5.5rem);
}

.about h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.625rem, 4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 1.1rem;
}

/* ===============================================================
   FOOTER — navy. The identity field closes the page.
   =============================================================== */

.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding-block: clamp(3.5rem, 9vw, 5rem);
}

.site-footer .label { color: var(--rev-faint); }
.site-footer a { text-decoration-color: rgba(246, 241, 235, 0.4); }

.email {
  font-size: clamp(1.125rem, 3vw, 1.3125rem);
  margin: 0 0 1.75rem;
  letter-spacing: 0.005em;
}

.contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  color: var(--rev-soft);
}

.colophon {
  margin: clamp(3rem, 8vw, 4.5rem) 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rev-faint);
}

/* --- narrow screens ------------------------------------------- */

@media (max-width: 30rem) {
  .service { grid-template-columns: 2rem 1fr; }
  .positioning { font-size: 0.9375rem; }
}

/* --- motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}