/* Terra Lumen — site stylesheet
   Palette "Verdigris" (locked April 2026):
     ground  #0C1A10
     copper  #C07230   (never #D28434 — that is Instagram-only)
     cream   #EAE4D0
   Section backdrops (chosen by Nikki, 10 Oct 2026): Verdigris ground (hero, Stones, Offering, footer),
   a copper backdrop #7E4B1F (Advisory, Writing) and a green backdrop #11331B (About, Contact). About moved to a warm
   charcoal #1D211E on 4 Nov 2026 (Nikki; neutral with a slight green lean, so it sits with the Verdigris). Copper and
   green carry cream text and cream links, because the brand copper #C07230 does not contrast enough against
   either. The brand copper is the mark, and links and buttons on Verdigris, including the Verdigris panel
   inside Advisory and the Verdigris inner box of the Contact frame. Change --green / --copper-bg to swap.

   Type system (10 Oct 2026, per Nikki's reference):
     Headings   Cormorant Garamond, all caps, letter-spacing 0.1em, up to 55px
     Subheads   Cormorant Garamond italic, 18px, letter-spacing 0.1em
     Body       Raleway Medium, 14px, line-height 2
   Note: Raleway is an addition to the April brand lock ("Cormorant Garamond throughout"). Fonts are
   self-hosted from assets/fonts (both SIL Open Font License).

   Spacing follows Relume's conventions (relume-tailwind preset v1.3.0):
     section padding 64 / 96 / 112px; 1280px container with 5% side padding; column gaps 48 / 80px.
*/

@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/raleway-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/raleway-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/raleway-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/raleway-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Raleway"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/raleway-latin-700-normal.woff2") format("woff2"); }

:root {
  --ground: #0C1A10;
  --ground-raised: #11231a;
  --copper: #C07230;
  --green: #11331B;
  --green-raised: #193F25;
  --charcoal: #1D211E;
  --charcoal-raised: #282C29;
  --copper-bg: #7E4B1F;
  --copper-raised: #8E5524;
  --cream: #EAE4D0;
  --cream-soft: rgba(234, 228, 208, 0.78);
  --cream-faint: rgba(234, 228, 208, 0.5);
  --line: rgba(234, 228, 208, 0.16);
  --copper-faint: rgba(192, 114, 48, 0.36);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Raleway", "Helvetica Neue", Arial, sans-serif;

  /* per-section roles; the colour variables above act as "ink" roles and are overridden per backdrop */
  --bg: var(--ground);
  --surface: var(--ground-raised);
  --btn: var(--copper);
  --btn-ink: var(--ground);

  --container: 80rem;
  --gutter: 5%;
  --section: 4rem;
  --header-gap: 3rem;
  --col-gap: 3rem;
  --nav-h: 4.5rem;
}
@media (min-width: 768px) { :root { --section: 6rem; --header-gap: 4.5rem; } }
@media (min-width: 992px) { :root { --section: 7rem; --header-gap: 5rem; --col-gap: 5rem; } }

* { box-sizing: border-box; }

html {
  background: var(--ground);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); }

::selection { background: var(--copper); color: var(--ground); }

a { color: var(--copper); text-decoration: none; text-underline-offset: 0.2em; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
a:focus-visible { outline: 1px solid var(--copper); outline-offset: 4px; border-radius: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Type ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.15;
}
/* Debossed titles: a dark edge above, a light edge below, as if pressed into the surface.
   On the near-black Verdigris the dark edge barely shows, so the light edge carries the effect there;
   on copper and green the dark edge shows, so it is the stronger of the two. */
h1, h2, h3 { text-shadow: 0 -1.5px 0.5px rgba(0, 0, 0, 0.85), 0 1.5px 0 rgba(255, 255, 255, 0.23); }
.section--copper h1, .section--copper h2, .section--copper h3,
.section--green h1, .section--green h2, .section--green h3 {
  text-shadow: 0 -1.5px 0.5px rgba(0, 0, 0, 0.72), 0 1.5px 0 rgba(255, 255, 255, 0.19);
}
h2 { font-size: 2.25rem; }                           /* 31.5px */
h3 { font-size: 1.75rem; }                           /* 24.5px */
@media (min-width: 768px) { h2 { font-size: 3rem; } h3 { font-size: 2rem; } }
@media (min-width: 992px) { h2 { font-size: 3.9rem; } h3 { font-size: 2.3rem; } }   /* 55px / 32px */

/* Subhead: Cormorant italic 18px, tracked */
h4, .sub {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;                                  /* 18px */
  letter-spacing: 0.1em;
  text-transform: none;
  line-height: 1.5;
}

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }

.lede { font-family: var(--serif); font-style: italic; font-size: 1.3rem; letter-spacing: 0.06em; line-height: 1.6; font-weight: 400; }
.tagline { display: block; font-family: var(--serif); font-style: italic; font-size: 1.3rem; letter-spacing: 0.1em; color: var(--cream-soft); margin-bottom: 0.75rem; line-height: 1.4; }
.meta { color: var(--cream-faint); }
.small { font-size: 0.86rem; }
.caps { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600; }

section[id], article[id] { scroll-margin-top: var(--nav-h); }

/* ---------- Paper texture overlay ----------
   assets/images/paper.jpg is the fibre detail of Bree's "paper texture 2", high-passed and centred on mid-grey,
   so blended in overlay mode it adds grain without changing the section's darkness. */
.section--paper { position: relative; }
.section--paper::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("images/paper.jpg") repeat; background-size: 900px auto;
  mix-blend-mode: overlay; opacity: 0.55;
}
.section--paper > .container { position: relative; z-index: 1; }
/* The copper Consultations section carries no grain (removed 4 Nov 2026, Nikki). */

/* ---------- Container and sections ---------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; }

.section { padding: var(--section) var(--gutter); background: var(--bg); }
/* Copper and green backdrops: cream ink, cream links */
.section--copper, .site-footer--copper { --bg: var(--copper-bg); --surface: var(--copper-raised); --btn-ink: #7E4B1F; }
.section--green, .site-footer--green { --bg: var(--green); --surface: var(--green-raised); --btn-ink: #11331B; }
/* Charcoal backdrop (About, 4 Nov 2026 at Nikki's request): a neutral, slightly green charcoal in the register of breeraitz.com's ground,
   replacing the green for that one section. Cream ink; the brand copper stays as the mark colour. */
.section--charcoal { --bg: var(--charcoal); --surface: var(--charcoal-raised); --btn: #EAE4D0; --btn-ink: #1D211E;
  --line: rgba(234, 228, 208, 0.2); color: var(--cream); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 {
  text-shadow: 0 -1.5px 0.5px rgba(0, 0, 0, 0.72), 0 1.5px 0 rgba(255, 255, 255, 0.19);
}
.section--charcoal.section--paper::before { opacity: 0.45; }
.section--copper, .site-footer--copper, .section--green, .site-footer--green {
  --line: rgba(234, 228, 208, 0.2); --copper: #EAE4D0; --copper-faint: rgba(234, 228, 208, 0.4);
  --btn: #EAE4D0;
  color: var(--cream);
}
.section--copper p a, .site-footer--copper p a, .section--green p a, .site-footer--green p a, .section--copper .essays h3 a, .section--green .essays h3 a { text-decoration: underline; text-decoration-color: rgba(234, 228, 208, 0.4); }
/* The crystal mark stays brand copper on every backdrop. */
/* On the copper backdrop the brand-copper mark would vanish, so it takes the Verdigris there. */
.section--green .mark, .site-footer--green .mark { stroke: #C07230; }
.section--copper .mark, .site-footer--copper .mark { stroke: #0C1A10; }
/* Panel on the copper backdrop: open notched frame, no fill, cream text, copper tagline */
.section--copper .panel {
  --f2-line: rgba(234, 228, 208, 0.6); --f2-bg: var(--copper-bg);
  padding: 2px;
  --cream: #EAE4D0; --cream-soft: rgba(234, 228, 208, 0.78); --cream-faint: rgba(234, 228, 208, 0.5);
  --copper: #C07230; --line: rgba(234, 228, 208, 0.16);
  color: var(--cream);
}
.section--copper .panel .tagline { color: #C07230; }

/* Button */
.button {
  display: inline-block;
  font-family: var(--sans); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1; padding: 1rem 1.9rem;
  border: 1px solid var(--btn); color: var(--btn); background: transparent;
  transition: background-color 160ms ease, color 160ms ease;
}
.button:hover { background: var(--btn); color: var(--btn-ink); text-decoration: none; }
.button:focus-visible { outline: 1px solid var(--btn); outline-offset: 4px; }

.section-header { margin-bottom: var(--header-gap); max-width: 48rem; }
.section-header .lede { margin-top: 1.25rem; color: var(--cream-soft); }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header--split { max-width: none; display: grid; gap: 1.5rem var(--col-gap); align-items: end; }
@media (min-width: 768px) {
  .section-header--split { grid-template-columns: 1fr 1fr; }
  .section-header--split .lede { margin-top: 0; }
}

.layout { display: grid; gap: 3rem var(--col-gap); align-items: center; }
@media (min-width: 768px) { .layout { grid-template-columns: 1fr 1fr; } }
.layout--media-left .layout__media { order: -1; }
@media (min-width: 768px) { .layout--media-right .layout__media { order: 2; } }
.layout__text h2 { margin-bottom: 1.5rem; }
.layout__text .lede { margin-bottom: 1.25rem; }
.layout__text p { color: var(--cream-soft); }
.layout__text p.lede { color: var(--cream); }
.layout__text .placeholder { color: var(--cream-faint); }

.columns { display: grid; gap: 2.5rem var(--col-gap); }
@media (min-width: 768px) { .columns { grid-template-columns: 1fr 1fr; } }
.columns > div { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.columns h4 { margin-bottom: 0.9rem; }
.columns p { color: var(--cream-soft); }

.panel { margin-top: var(--header-gap); }
.panel h3 { margin-bottom: 1rem; }
.panel p { color: var(--cream-soft); }
.panel .tagline { margin-bottom: 0.5rem; }

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(12, 26, 16, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { height: var(--nav-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--cream); font-family: var(--serif); letter-spacing: 0.3em; font-size: 0.95rem; text-transform: uppercase; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 1.4rem; height: 1.4rem; flex: none; stroke-width: 16; }

.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2.25rem; }
.site-nav a { color: var(--cream-soft); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.site-nav a:hover { color: var(--cream); text-decoration: none; }
.site-nav a.is-active { color: var(--copper); }
.tile__icon, .tile__desc { display: none; }

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; margin-right: -0.5rem; cursor: pointer; color: var(--cream); }
.nav-toggle span { display: block; width: 22px; height: 1px; background: currentColor; margin: 6px 0; transition: transform 200ms ease, opacity 200ms ease; }

@media (max-width: 991px) {
  .nav-toggle { display: block; }
  body.menu-open { overflow: hidden; }

  /* Full-screen menu: six tiles on alternating backdrops, then a contact strip */
  /* Anchored to the sticky header (its backdrop blur would trap a position:fixed child) */
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h));
    background: var(--ground);
    display: none; flex-direction: column; overflow: auto;
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav ul {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
    gap: 1px; background: var(--line); padding: 0; margin: 0;
  }
  .site-nav li { display: flex; border: 0; }
  .site-nav a.tile {
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.5rem;
    padding: 1.25rem; min-height: 8.5rem; color: var(--cream); text-decoration: none;
    letter-spacing: 0; text-transform: none; font-size: 1rem;
  }
  .site-nav li:nth-child(1) a { background: var(--green); }
  .site-nav li:nth-child(2) a { background: var(--ground); }
  .site-nav li:nth-child(3) a { background: var(--copper-bg); }   /* Consultations: copper */
  .site-nav li:nth-child(4) a {                            /* Contact: the woodgrain, same 40% tint as its section */
    background-color: #301610;
    background-image: linear-gradient(rgba(48, 22, 16, 0.40), rgba(48, 22, 16, 0.40)), url("images/contact-texture-TRIAL.jpg");
    background-size: cover; background-position: center;
  }
  .tile__icon { display: block; width: 2rem; height: 2rem; fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.5rem; }
  .tile__name { display: block; font-family: var(--sans); font-weight: 400; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.9rem; }
  .tile__desc { display: block; font-family: var(--serif); font-style: italic; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--cream-soft); line-height: 1.3; }
  .site-nav a.tile.is-active { box-shadow: inset 0 3px 0 var(--copper); color: var(--cream); }
  .site-nav a.tile.is-active .tile__name { color: var(--copper); }

  .menu-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem var(--gutter); border-top: 1px solid var(--line);
    font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .menu-foot .mark { width: 1.2rem; height: 1.2rem; stroke-width: 16; }
  .menu-foot a { color: var(--cream-soft); }
  .menu-foot a[href*="instagram"] { color: var(--copper); }

  .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (prefers-reduced-motion: no-preference) {
    .site-header.is-open .site-nav li { animation: arrive 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .site-header.is-open .site-nav li:nth-child(2) { animation-delay: 50ms; }
    .site-header.is-open .site-nav li:nth-child(3) { animation-delay: 100ms; }
    .site-header.is-open .site-nav li:nth-child(4) { animation-delay: 150ms; }
    .site-header.is-open .site-nav li:nth-child(5) { animation-delay: 200ms; }
    .site-header.is-open .site-nav li:nth-child(6) { animation-delay: 250ms; }
    .site-header.is-open .menu-foot { animation: arrive 480ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both; }
  }
}
@media (min-width: 992px) { .menu-foot { display: none; } }

/* ---------- Mark ---------- */

.mark { fill: none; stroke: var(--copper); stroke-width: 10; stroke-linecap: round; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: grid; place-items: center; text-align: center; padding: var(--section) var(--gutter); }
.hero__ghost { position: absolute; inset: 0; margin: auto; width: 110vmin; height: 110vmin; opacity: 0.09; pointer-events: none; }
.hero__ghost .mark { stroke-width: 4; }
.hero__inner { position: relative; max-width: 46rem; }
.hero__mark { width: clamp(64px, 8vw, 96px); height: auto; margin: 0 auto 2.25rem; }

.wordmark { line-height: 1; margin: 0 0 2.5rem; text-transform: uppercase; }
.wordmark__terra { display: block; font-weight: 300; font-size: clamp(1.1rem, 1.9vw, 1.5rem); letter-spacing: 0.42em; padding-left: 0.42em; margin-bottom: 0.6em; }
.wordmark__lumen { display: block; font-weight: 400; font-size: clamp(2.3rem, 4vw, 3.4rem); letter-spacing: 0.2em; padding-left: 0.2em; }

.hero__statement .line { display: block; font-family: var(--serif); text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.5; margin-bottom: 1rem; }
.hero__statement .sub { display: block; color: var(--cream-soft); max-width: 38rem; margin: 0 auto; }


/* ---------- Images and slots ---------- */

figure { margin: 0; }
figcaption { font-size: 0.86rem; color: var(--cream-faint); margin-top: 0.6rem; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .gallery { gap: 2rem; } .gallery--3 { grid-template-columns: repeat(3, 1fr); } }
/* On phones the three-up gallery shows two: the third (rainbow stones) is hidden and its file is not loaded */
@media (max-width: 767px) { .gallery--3 > figure:nth-child(3) { display: none; } }

/* Photographs */
.photo { width: 100%; height: auto; object-fit: cover; display: block; }
.photo--hero { aspect-ratio: 16 / 9; }

/* Image slot — placeholder until a photograph is supplied. Replace the <div class="slot"> with an <img>. */
.slot { background: var(--surface); border: 1px dashed var(--copper-faint); display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--cream-faint); font-family: var(--serif); font-style: italic; font-size: 1.1rem; letter-spacing: 0.04em; line-height: 1.5; width: 100%; }
.slot--landscape { aspect-ratio: 3 / 2; }
.slot--portrait { aspect-ratio: 4 / 5; }
.slot--square { aspect-ratio: 1; }
.slot--wide { aspect-ratio: 21 / 9; }

/* Text placeholder — copy still to come from Bree. */
.placeholder { border-left: 1px dashed var(--copper-faint); padding: 0.2rem 0 0.2rem 1.1rem; color: var(--cream-faint); font-style: italic; }
h2 .placeholder, h3 .placeholder { font-style: normal; color: var(--cream); }

/* ---------- Double frame with notched corners (after Nikki's reference) ----------
   Four nested layers, each masked with concave quarter-circle corners of a slightly smaller radius:
   outer line (2px) → gap → inner line (1px) → body. Colours via --f2-line and --f2-bg. */
.frame2 { --f2-line: rgba(192, 114, 48, 0.85); --f2-bg: var(--surface); --f2-r: 18px; background: var(--f2-line); padding: 2px; }
.frame2__gap  { background: var(--f2-bg); padding: 5px; --f2-r: 16px; }
.frame2__line { background: var(--f2-line); padding: 1px; --f2-r: 11px; }
.frame2__body { background: var(--f2-bg); --f2-r: 10px; padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.frame2, .frame2__gap, .frame2__line, .frame2__body {
  -webkit-mask:
    radial-gradient(circle at 0 0,       transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 0 0       / 52% 52% no-repeat,
    radial-gradient(circle at 100% 0,    transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 100% 0    / 52% 52% no-repeat,
    radial-gradient(circle at 0 100%,    transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 0 100%    / 52% 52% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 100% 100% / 52% 52% no-repeat;
  mask:
    radial-gradient(circle at 0 0,       transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 0 0       / 52% 52% no-repeat,
    radial-gradient(circle at 100% 0,    transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 100% 0    / 52% 52% no-repeat,
    radial-gradient(circle at 0 100%,    transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 0 100%    / 52% 52% no-repeat,
    radial-gradient(circle at 100% 100%, transparent var(--f2-r), #000 calc(var(--f2-r) + 0.5px)) 100% 100% / 52% 52% no-repeat;
}

/* ---------- Offering: message card ---------- */

.message { margin-top: 2rem; }
.message .mark { width: 1.2rem; height: 1.2rem; margin-bottom: 1.25rem; }
.message p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.7; letter-spacing: 0.03em; max-width: 44rem; }

/* ---------- Writing: essay cards ---------- */

.essay-grid { display: grid; gap: 2.5rem var(--col-gap); }
@media (min-width: 768px) { .essay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .essay-grid { grid-template-columns: repeat(3, 1fr); } }

.essay-card { display: flex; flex-direction: column; gap: 1.5rem; }
.essay-card figure { margin: 0; }
.essay-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.essay-card__date { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-faint); }
.essay-card h3 { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; line-height: 1.3; letter-spacing: 0; text-transform: none; text-shadow: none; }
.essay-card h3 a { color: var(--cream); }
.essay-card h3 a:hover { color: var(--copper); text-decoration: none; }
.essay-card p { color: var(--cream-soft); }
.essay-card .button { margin-top: 0.5rem; }

/* A lone essay runs wide: picture on the left, text on the right */
@media (min-width: 768px) {
  .essay-card:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2.5rem var(--col-gap); }
}

/* Essay page */
.essay { max-width: 48rem; }
.essay h1 { font-family: var(--sans); font-weight: 700; font-size: 2.2rem; line-height: 1.2; letter-spacing: 0; text-transform: none; text-shadow: none; margin-bottom: 1.5rem; }
.essay-body p { margin-bottom: 1.25rem; }
.essay-body h2 { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: 0; text-transform: none; text-shadow: none; margin: 2.5rem 0 0.9rem; }
.essay .image { margin: 2.5rem 0; }

/* ---------- Contact: framed box (after Nikki's reference), open double frame over the wood ---------- */

/* Open variant of the notched double frame: no fills, the two lines are an SVG overlay sized by script. */
.frame2--open { position: relative; background: none; padding: 0; -webkit-mask: none; mask: none; }
.frame2--open > .frame2__gap, .frame2--open .frame2__line, .frame2--open .frame2__body { background: none; padding: 0; -webkit-mask: none; mask: none; }
.frame2__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.frame2__svg path { fill: none; stroke: var(--f2-line); }
.frame2__svg .outer { stroke-width: 2; }
.frame2__svg .inner { stroke-width: 1; }
.frame2--open .frame2__body { padding: 8px; position: relative; }
.panel.frame2--open .frame2__body { padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.panel.frame2--open { --f2-line: rgba(234, 228, 208, 0.6); }

/* Wood-grain section. Texture licence confirmed by Nikki, 11 Oct 2026. */
.section--texture {
  background-color: #301610;
  /* 40% tint of the wood's own darkest pigment (#301610, sampled from the image) over the full-bleed grain
     (was 25%; deepened 15 points at Nikki's request, 4 Nov 2026) */
  background-image: linear-gradient(rgba(48, 22, 16, 0.40), rgba(48, 22, 16, 0.40)), url("images/contact-texture-TRIAL.jpg");
  background-size: cover;
  background-position: center;
  --f2-line: rgba(234, 228, 208, 0.85);
  --line: rgba(234, 228, 208, 0.35);
  --copper: #EAE4D0; --copper-faint: rgba(234, 228, 208, 0.5);
  --btn: #EAE4D0; --btn-ink: #301610;
  color: var(--cream);
}
.section--texture .frame2 { --f2-line: rgba(234, 228, 208, 0.85); }
.section--texture .frame__head p, .section--texture .frame__col p { color: var(--cream); }
.section--texture .frame__head .caps { color: var(--cream-soft); }
.section--texture h1, .section--texture h2, .section--texture h3 { text-shadow: 0 -1.5px 0.5px rgba(0, 0, 0, 0.6), 0 1.5px 0 rgba(255, 255, 255, 0.16); }

.frame__head { display: grid; gap: 1.5rem var(--col-gap); padding: 2.5rem clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 768px) { .frame__head { grid-template-columns: 1fr 1.4fr; } }
.frame__head h2 { font-size: 2.2rem; }
@media (min-width: 992px) { .frame__head h2 { font-size: 2.8rem; } }
.frame__head .caps { display: block; color: var(--cream-faint); margin-bottom: 0.4rem; }
.frame__head p { color: var(--cream-soft); }
.frame__cols { display: grid; }
@media (min-width: 768px) { .frame__cols { grid-template-columns: repeat(3, 1fr); } }
.frame__col { padding: 2.5rem clamp(1rem, 3vw, 2.5rem); text-align: center; }
.frame__col + .frame__col { border-top: 1px solid var(--line); }
@media (min-width: 768px) { .frame__col + .frame__col { border-top: 0; border-left: 1px solid var(--line); } }
.frame__col h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.frame__col h3 a { color: inherit; }
.frame__col h3 a:hover { color: var(--copper); text-decoration: none; }
.frame__col p { color: var(--cream-soft); margin-bottom: 0.5rem; }
.frame__col a.big { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.04em; }
.frame__col .divider { display: block; width: 2rem; height: 1px; background: var(--copper-faint); margin: 1rem auto; }

/* ---------- Privacy ---------- */

.legal { max-width: 48rem; }
.legal h1 { font-size: 2.6rem; margin-bottom: 0.75rem; }
.legal h2 { font-size: 1.6rem; margin: 2.75rem 0 1rem; }
.legal h3 { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0.08em; font-size: 1.3rem; margin: 1.5rem 0 0.35rem; }
.legal p { color: var(--cream-soft); }

/* Business details: a quiet block at the foot of the privacy page */
.business-details { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.86rem; }
.business-details h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--cream-faint); text-shadow: none; }
.business-details dl { margin: 0; display: grid; gap: 0.1rem 1.5rem; }
.business-details dl > div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.business-details dt { color: var(--cream-faint); }
.business-details dd { margin: 0; color: var(--cream-soft); }

/* ---------- Footer (after Nikki's reference) ---------- */

.site-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 3rem var(--gutter) 2rem; }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.25rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.footer-nav a { color: var(--cream-soft); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; }
.footer-nav a:hover { color: var(--cream); text-decoration: none; }
.footer-nav .brand { margin: 0 1rem; }
@media (max-width: 767px) { .footer-nav .brand { order: -1; width: 100%; justify-content: center; margin-bottom: 0.5rem; } }

.footer-grid { display: grid; gap: 2.5rem var(--col-gap); padding: 3rem 0; align-items: center; text-align: center; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr auto 1fr; } }
.footer-grid h3 { font-size: 1.4rem; margin-bottom: 1rem; }
.footer-grid p { color: var(--cream-soft); margin-bottom: 0.5rem; }
.footer-grid a.caps { color: var(--cream); display: inline-block; margin-top: 0.75rem; border-bottom: 1px solid var(--copper-faint); padding-bottom: 0.2rem; }
.footer-grid a.caps:hover { text-decoration: none; color: var(--copper); }

.seal { width: 11rem; height: 11rem; margin: 0 auto; display: block; }
.seal circle { fill: none; stroke: var(--copper-faint); stroke-width: 1; }
.seal .mark { stroke-width: 14; stroke: #C07230; }
.seal text { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.28em; fill: var(--cream-soft); text-transform: uppercase; }

.footer-legal { border-top: 1px solid var(--line); padding-top: 1.5rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); line-height: 2.2; }
.footer-legal a { color: var(--cream-faint); }
.footer-legal a:hover { color: var(--copper); }
.footer-legal .sep { margin: 0 0.6em; color: var(--copper-faint); }
.footer-legal__row { list-style: none; margin: 0 auto 0.5rem; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.footer-legal__row li { padding: 0 1.4rem; white-space: nowrap; }
.footer-legal__row li + li { border-left: 1px solid var(--copper-faint); }
/* Phone footer: seal small at the top, Find us and Stay in the loop side by side, no nav row,
   legal items and links centred one per line */
@media (max-width: 767px) {
  .footer-nav { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-top: 2rem; }
  .footer-grid > div:nth-child(2) { order: -1; grid-column: 1 / -1; }
  /* Phone seal: one circle and a bold mark, no text, no outer ring */
  .seal { width: 8rem; height: 8rem; }
  .seal text, .seal circle:first-of-type { display: none; }
  .seal circle { stroke: var(--copper); stroke-width: 1.5; }
  .seal .mark { stroke-width: 24; }
  .footer-grid h3 { font-size: 1.1rem; }
  .footer-legal__row { flex-direction: column; align-items: center; margin-bottom: 0; }
  .footer-legal__row li { padding: 0; }
  .footer-legal__row li + li { border-left: 0; }
  .footer-legal__links .sep { display: none; }
  .footer-legal__links a { display: block; }
}
.footer-legal__links { margin: 0; }

/* ---------- Motion ----------
   One orchestrated arrival on load (hero), then a quiet rise-and-settle for text as each section enters.
   Elements get .reveal from the script and .is-in when they cross into view; nothing moves for
   people who have asked their system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  a { transition: color 160ms ease; }

  .reveal { opacity: 0; transform: translateY(22px); transition: opacity 900ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
  .reveal.is-in { opacity: 1; transform: none; }

  .hero__mark, .hero .wordmark__terra, .hero .wordmark__lumen, .hero__statement .line, .hero__statement .sub {
    opacity: 0; transform: translateY(14px);
    animation: arrive 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .hero__mark { animation-delay: 150ms; }
  .hero .wordmark__terra { animation-delay: 550ms; }
  .hero .wordmark__lumen { animation-delay: 700ms; }
  .hero__statement .line { animation-delay: 1050ms; }
  .hero__statement .sub { animation-delay: 1250ms; }
  .hero__ghost { opacity: 0; animation: ghost 2200ms ease-out 300ms forwards; }
  @keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes ghost { to { opacity: 0.09; } }
}

@media print {
  html, body { background: #fff; color: #000; }
  .site-header, .site-footer, .hero__ghost { display: none; }
  a { color: #000; }
}

/* Keeps a short phrase on one line (hero statement on narrow screens). */
.nowrap { white-space: nowrap; }