/* Cairde Consulting: homepage v1. No build step. */

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

:root {
  --ink: #18221f;          /* deep charcoal-green base */
  --ink-deep: #121a17;     /* darker edge tone */
  --gold: #b89f6e;         /* champagne vein tone (from the marble) */
  --silver: #cbcac6;       /* wordmark */
  --silver-soft: #bfbdb8;  /* nav */
  --silver-warm: #d3cfc5;  /* descriptive line */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --pad-x: clamp(1.5rem, 6vw, 6rem);
  --pad-top: clamp(1.75rem, 5.2vh, 3.25rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--silver);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--silver); outline-offset: 6px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 10;
  padding: .5rem .9rem; background: #151716; color: var(--silver);
  font-size: .875rem; transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ---------- Hero canvas: procedural marble image + soft overlays ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink);
  background-image: url("../assets/img/marble.jpg");
  background-image: image-set(
    url("../assets/img/marble.avif") type("image/avif"),
    url("../assets/img/marble.webp") type("image/webp"),
    url("../assets/img/marble.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: 60% 50%;
}

/* Quiet the marble behind the wordmark, nav and descriptive line */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 0% 0%, rgba(18, 26, 23, .55) 0%, transparent 70%),
    linear-gradient(90deg, rgba(18, 26, 23, .35) 0%, transparent 55%);
}

/* Very faint film grain (tiny SVG turbulence data-URI) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- Header: brand + nav over the hero ---------- */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--pad-top) var(--pad-x) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(.7rem, 1.25vw, 1.25rem);
}
.brand__mark {
  display: block;
  width: clamp(3.4rem, 7.6vw, 7.5rem);
  height: auto;
  flex: none;
}
.brand__words {
  /* --name-size drives both lines so the C-centre alignment scales with the wordmark */
  --name-size: clamp(2.6rem, 5.7vw, 5.6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.brand__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--name-size);
  letter-spacing: -.012em;
  line-height: .9;
  color: var(--silver);
  /* Cormorant 'C' has a 0.049em left side bearing; pull it back so the ink edge sits on the box edge */
  margin-left: -.049em;
}
.brand__sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(.95rem, 2vw, 1.95rem);
  letter-spacing: .035em;
  margin-top: .32em;
  /* Centre the Jost 'C' under the Cormorant 'C'.
     Cairde C ink centre sits .2935em (of --name-size) from the wordmark's left edge
     (ink 49-636 units, minus the -.049em pull-back); Consulting C ink centre is .3275em
     (own em) from its origin (ink 40-615 units). Offset = difference. */
  margin-left: calc(var(--name-size) * .2935 - .3275em);
  color: #d2d1ca;
}

.site-nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: clamp(.6rem, 1.6vw, 1.5rem);
}
.site-nav li { display: flex; align-items: center; }
.site-nav li + li::before {
  content: "";
  width: 4px; height: 4px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  margin: 0 clamp(.9rem, 1.6vw, 1.5rem);
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: .35em 0;
  font-size: clamp(.95rem, 1.6vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .03em;
  color: var(--silver-soft);
  transition: color .3s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: .6;
  transition: transform .35s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: #f0efea; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-nav a, .site-nav a::after { transition: none; }
}

/* ---------- Descriptive line at ~60% viewport height ---------- */
.hero__line {
  position: absolute;
  left: var(--pad-x);
  top: 60.5%;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: clamp(1rem, 2.05vw, 1.9rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--silver-warm);
}
.hero__line .dot {
  width: .16em; height: .16em;
  border-radius: 50%;
  background: currentColor;
  opacity: .75;
  margin: 0 .55em;
}

/* ---------- Placeholders + footer ---------- */
.placeholder { scroll-margin-top: 2rem; }
.site-footer {
  padding: 1.5rem var(--pad-x) 2rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: #a3a5a0; /* about 6:1 on #18221f */
}
.site-footer p { margin: 0; }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    gap: 1.6rem;
  }
  .brand__mark { width: 3.6rem; }
  .brand__words { --name-size: 2.75rem; }
  .brand__sub { font-size: 1rem; }
  .site-nav ul { margin-top: 0; flex-wrap: wrap; }
  .site-nav a { font-size: .9375rem; padding: .5em 0; } /* larger tap height */
  .site-nav li + li::before { margin: 0 .8rem; }
  .hero__line {
    font-size: min(1rem, 3.85vw);
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .hero { background-position: 85% 50%; } /* keeps the gold vein clear of the descriptive line */
}
@media (max-width: 360px) {
  .site-nav li + li::before { margin: 0 .55rem; }
  .site-nav a { font-size: .875rem; }
}