/* ==========================================================================
   Agency Counselling: site styles
   Plain CSS. No build step, no JavaScript. One self-hosted font. Edit this file directly.

   1  Tokens            5  Hero and page titles    9  Print
   2  Base              6  Content pieces         10  DRAFT MODE (delete at launch)
   3  Layout            7  Footer
   4  Header            8  Motion
   ========================================================================== */

/* 1  Tokens ---------------------------------------------------------------
   Every colour starts from Kate's logo: its cream ground, the plum of
   "AGENCY", the rose of the ring. The hero paints a chinook arch at dusk in
   those same colours: a band of plum cloud with lit sky under it. */
:root {
  --cream: #f9f0ea;        /* the logo's own background: page background */
  --blush: #f2e3dc;        /* alternate bands */
  --plum: #6e5058;         /* the logo's lettering */
  --plum-deep: #432d37;    /* dusk cloud: hero, page titles, footer */
  --plum-mid: #5a3e4b;
  --ink: #3a2730;          /* body text */
  --mauve: #6b5560;        /* secondary text on light surfaces */
  --rose: #b78989;         /* the logo's ring: decoration only, never text */
  --rose-soft: #e6cfcb;    /* quiet text on plum */
  --berry: #8a3b58;        /* links and focus on light surfaces */
  --line: #e6d3cb;         /* hairlines on cream */

  --focus: var(--berry);

  /* Headings use Cormorant Garamond, the open-licence face nearest the logo's
     lettering, served from this site (no request to any font service). Its
     fallbacks are each platform's own book serif. Everything else uses the
     visitor's system sans, which pairs with the logo's "COUNSELLING". */
  --display: "Cormorant Garamond", "Sitka Banner", "Sitka Display", Baskerville,
    "Hoefler Text", "Palatino Linotype", Palatino, "Noto Serif", Georgia, serif;
  --sans: Seravek, "Segoe UI Variable Text", "Segoe UI", "Avenir Next", Avenir,
    "Helvetica Neue", "Noto Sans", Roboto, system-ui, sans-serif;

  --measure: 62ch;
  --gutter: 1.25rem;
}

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

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

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

/* Small headings switch to the sans: crisper at text sizes than the display serif. */
h3 {
  font: 600 1.15rem/1.3 var(--sans);
}

p,
ul,
ol,
dl,
dd {
  margin: 0;
}

p {
  text-wrap: pretty;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--berry);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.15em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0.15rem;
}

main:focus {
  outline: none;
}

/* Plum surfaces: the hero, page titles and footer. */
.on-plum {
  --focus: #ffffff;
  background: var(--plum-deep);
  color: var(--cream);
}

.on-plum a {
  color: inherit;
  text-decoration-color: var(--rose);
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: var(--gutter);
  z-index: 10;
  padding: 0.9rem 1.1rem;
  border-radius: 0 0 0.4rem 0.4rem;
  background: var(--plum-deep);
  color: var(--cream);
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* 3  Layout --------------------------------------------------------------- */
.wrap {
  width: min(100% - 2 * var(--gutter), 70rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}

.section--blush {
  background: var(--blush);
}

/* Heading on the left, content on the right; stacked on small screens. */
.split {
  display: grid;
  gap: 1.25rem 3.5rem;
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

.split > h2 {
  font-size: clamp(2.1rem, 3.9vw, 2.9rem);
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose > h3 {
  margin-top: 2em;
}

.prose > h3:first-child {
  margin-top: 0;
}

/* Plain lists only. Lists with a class (steps, help-list) style themselves. */
.prose ul:not([class]) {
  padding-left: 1.2em;
}

.prose ul:not([class]) > li + li {
  margin-top: 0.4em;
}

/* Links in a list are stand-alone tap targets: at least 44px (agency rule). */
.prose ul:not([class]) a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* 4  Header --------------------------------------------------------------- */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 0.6rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.wordmark img {
  display: block;
  width: auto;
  height: clamp(2.25rem, 5vw, 2.75rem);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.98rem;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  min-width: 2.75rem;
  color: var(--ink);
  text-decoration: underline transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.nav a:hover {
  text-decoration-color: var(--rose);
}

.nav a[aria-current="page"] {
  text-decoration-color: var(--plum);
}

/* Urgent help is a different kind of destination, so it looks different. */
.nav .nav__urgent {
  min-height: 2.75rem;
  padding-inline: 0.85rem;
  border: 1.5px solid var(--plum);
  border-radius: 0.4rem;
}

.nav .nav__urgent:hover {
  background: var(--blush);
  text-decoration-color: transparent;
}

.nav .nav__urgent[aria-current="page"] {
  background: var(--blush);
  text-decoration-color: transparent;
}

/* Booking is the primary action on every page. */
.nav .nav__book {
  min-height: 2.75rem;
  padding-inline: 1rem;
  border-radius: 0.4rem;
  background: var(--plum-deep);
  color: var(--cream);
  font-weight: 600;
}

.nav .nav__book:hover {
  background: var(--plum-mid);
  text-decoration-color: transparent;
}

/* 5  Hero and page titles ------------------------------------------------- */
.hero__inner,
.page-title__text {
  display: grid;
  gap: 1.75rem 3.5rem;
  align-items: center;
}

.hero__inner {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-title__text {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(0.75rem, 2vw, 1.25rem);
}

@media (min-width: 48rem) {
  .hero__inner,
  .page-title__text--portrait {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* The logo's own line, set the way the logo sets it: italic, one thought per line. */
.hero h1 {
  font-size: clamp(3rem, 9.2vw, 6.75rem);
  font-style: italic;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.hero h1 span {
  display: block;
}

.hero .lede {
  margin-top: 1.5rem;
}

.lede {
  max-width: 34rem;
  color: var(--rose-soft);
  font-size: clamp(1.1rem, 1.9vw, 1.25rem);
  line-height: 1.55;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2rem;
  font-family: var(--sans);
}

/* Kate's portrait, ringed the way her logo is. */
.portrait {
  display: block;
  width: clamp(8.5rem, 24vw, 16rem);
  height: auto;
  margin: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 0.35rem var(--plum-deep), 0 0 0 0.47rem var(--rose);
}

/* On small screens the face comes first, then the words. */
@media (max-width: 47.99rem) {
  .hero__inner > .portrait,
  .page-title__text--portrait > .portrait {
    order: -1;
  }
}

/* The arch: cloud above, lit sky under it, the Rockies along the bottom. */
.hero__sky {
  display: block;
  width: 100%;
  height: clamp(10rem, 27vw, 21rem);
}

.page-title h1 {
  font-size: clamp(2.7rem, 6.6vw, 4.4rem);
  letter-spacing: -0.01em;
}

.page-title .lede {
  margin-top: 1rem;
}

.arch-slim {
  display: block;
  width: 100%;
  height: clamp(3rem, 8vw, 5.5rem);
  /* Matches the colours the image meets above and below, so no hairline shows at its edges. */
  background: linear-gradient(var(--plum-deep) 50%, var(--cream) 50%);
}

/* 6  Content pieces ------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  background: var(--plum-deep);
  color: var(--cream);
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
}

.button:hover {
  background: var(--plum-mid);
}

.on-plum .button {
  background: var(--cream);
  color: var(--ink);
}

.on-plum .button:hover {
  background: #ffffff;
}

/* The second choice beside a primary button. */
.button--ghost {
  border-color: currentColor;
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--blush);
}

.on-plum .button--ghost {
  background: transparent;
  color: var(--cream);
}

.on-plum .button--ghost:hover {
  background: var(--plum-mid);
}

/* A sequence, so it is numbered. */
.steps {
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 0.75rem;
  counter-increment: step;
}

.steps > li + li {
  margin-top: 1.75rem;
}

.steps > li::before {
  content: counter(step);
  color: var(--plum);
  font-family: var(--display);
  font-size: 3rem;
  font-style: italic;
  line-height: 1;
}

.steps h3 {
  padding-top: 0.6rem;
}

.steps p {
  margin-top: 0.4rem;
}

/* Label and value rows: session format, fees and the like. */
.facts > div {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}

.section--blush .facts > div {
  border-top-color: #dcc4bb;
}

.facts dt {
  color: var(--mauve);
  font: 600 0.95rem/1.4 var(--sans);
}

.facts dd {
  margin-top: 0.2rem;
}

.email-link {
  font-family: var(--display);
  font-size: clamp(1.5rem, 4.4vw, 2.4rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Urgent help: one row per service, the number large enough to tap. */
.help-list {
  padding: 0;
  list-style: none;
}

.help-list > li {
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}

.section--blush .help-list > li {
  border-top-color: #dcc4bb;
}

.help-list > li:first-child {
  padding-top: 0;
  border-top: 0;
}

.help-list .number {
  display: block;
  margin-top: 0.3rem;
  font: 600 1.35rem/1.4 var(--sans);
  font-variant-numeric: tabular-nums;
}

.help-list .number a {
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.help-list p {
  margin-top: 0.3rem;
}

/* A link on a line of its own gets a taller tap area. */
.standalone {
  display: inline-block;
  padding-block: 0.3rem;
}

.note {
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--plum);
  background: #fffaf6;
}

.small {
  color: var(--mauve);
  font: 0.92rem/1.55 var(--sans);
}

/* Home page rhythm: three section shapes, so the page does not read as one repeated block. */

/* A statement: one large sentence across the page, its explanation set to the right. */
.statement > h2 {
  grid-column: 1 / -1;
  max-width: 22em;
  font-size: clamp(2.2rem, 5vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.statement > p {
  max-width: var(--measure);
}

@media (min-width: 56rem) {
  .statement > p {
    grid-column: 2;
  }
}

/* Two parallel choices, side by side. */
.section-title {
  font-size: clamp(2.1rem, 3.9vw, 2.9rem);
}

.pair {
  display: grid;
  gap: 2.5rem 3.5rem;
  margin-top: 2rem;
}

@media (min-width: 44rem) {
  .pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pair > div {
  padding-top: 1.25rem;
  border-top: 2px solid var(--plum);
}

/* A compact band: the question on the left, its one action on the right. */
.section--tight {
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.band h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
}

.band p {
  max-width: 36rem;
  margin-top: 0.4rem;
}

/* 7  Footer --------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
}

.site-footer h2 {
  font-size: 1.9rem;
}

.footer-urgent {
  max-width: 46rem;
}

.footer-urgent p {
  margin-top: 0.6rem;
  color: var(--rose-soft);
}

.footer-urgent a {
  color: var(--cream);
  font-weight: 600;
}

.footer-cols {
  display: grid;
  gap: 1.75rem 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--plum-mid);
}

@media (min-width: 44rem) {
  .footer-cols {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr);
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.footer-brand img {
  flex: none;
  width: 7rem;
  height: auto;
  border-radius: 50%;
}

.footer-cols ul {
  padding: 0;
  list-style: none;
}

.footer-cols a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.fine {
  max-width: 46rem;
  margin-top: 2rem;
  color: var(--rose-soft);
  font-size: 0.88rem;
}

/* 8  Motion ---------------------------------------------------------------
   One moment only: the light under the arch comes up once as the page loads. */
@media (prefers-reduced-motion: no-preference) {
  .hero__glow {
    animation: light-comes-up 2.8s ease-out both;
  }
}

@keyframes light-comes-up {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

/* 9  Print ---------------------------------------------------------------- */
@media print {
  .skip-link,
  .nav,
  .hero__sky,
  .arch-slim,
  .actions,
  .portrait {
    display: none;
  }

  .on-plum {
    background: none;
    color: #000000;
  }

  .lede,
  .footer-urgent p,
  .fine {
    color: #000000;
  }

  body {
    background: none;
    font-size: 11pt;
  }
}

/* 10  DRAFT MODE ----------------------------------------------------------
   Everything from here to the end of the file exists only while the site is
   unapproved. Delete this whole block at launch. tools/check.py --release
   fails until it is gone. See business-docs/TEST-AND-READINESS-REPORT.md. */
body::before {
  content: "Draft preview. Not approved or published. Dashed outlines mark wording that still needs Kate\2019s approval.";
  display: block;
  padding: 0.6rem var(--gutter);
  background: #fff3c4;
  color: #3d2f00;
  font: 600 0.875rem/1.4 var(--sans);
  text-align: center;
}

[data-draft] {
  outline: 2px dashed #b07d0c;
  outline-offset: 0.6rem;
}

.on-plum [data-draft] {
  outline-color: #f5d27a;
}

[data-draft]::before {
  content: "Draft: " attr(data-draft);
  display: block;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.2rem;
  background: #fff3c4;
  color: #3d2f00;
  font: 600 0.78rem/1.4 var(--sans);
  font-style: normal;
  letter-spacing: 0;
}

@media print {
  body::before,
  [data-draft]::before {
    display: none;
  }

  [data-draft] {
    outline: 0;
  }
}