/* =========================================================================
   moondragon-hero.css
   Shared stylesheet for the four hero wording treatments: a.php to d.php.
   Palette: warm hedgerow in leaf, bramble damson accent, no black.
   Edit once here and every page follows.
   ========================================================================= */

:root{
  /* ---- Hero background. Change per season by swapping this one line. ---- */
  --hero-image: url("assets/4.jpg");
  --hero-position: center 58%;

  /* ---- Dragon watermark over the open right side. Swap or restrength here. ---- */
  --mark-image: url("assets/moondragon-dragon.svg");
  --mark-strength: .15;   /* Susan's ghost mark opacity; one value to tune. */

  /* ---- Veil strength. Both at max per approved setting. ---- */
  --veil-top: 1.00;      /* the open, light side of the image */
  --veil-bottom: 1.00;   /* the side the text sits over */

  /* ---- Palette ---- */
  --page:#f4f0e3;
  --page-alt:#e6e9d8;
  --ink:#2c3b28;
  --ink-soft:#55654f;
  --cream:#fbf8ee;
  --hedge-mid:#6c8459;
  --hedge-near:#4a6141;
  --accent:#6d4a63;
  --accent-lift:#855b79;
  --rule:#dbd8c4;

  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --wonk:"SOFT" 100, "WONK" 1;
  --gutter:clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--body); line-height:1.65; font-size:1.05rem;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--display); font-variation-settings:var(--wonk);
  font-weight:400; margin:0; line-height:1.06;
}
a{ color:var(--accent); }
a:hover{ color:var(--accent-lift); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; background:var(--page); color:var(--ink);
  padding:.75rem 1rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

/* ---------------- Nav with moon dial ---------------- */
.nav{
  position:absolute; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.2rem var(--gutter);
}
.nav-logo{ display:flex; align-items:center; gap:.85rem; text-decoration:none; }
.nav-logo img{ height:42px; width:auto; display:block; }
.nav-logo .wordmark{
  font-family:var(--display); font-variation-settings:var(--wonk);
  font-size:1.15rem; color:var(--ink); letter-spacing:.01em; white-space:nowrap;
}
.nav-links{ display:flex; gap:1.7rem; list-style:none; margin:0; padding:0; align-items:center; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase; padding-block:.3rem;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.nav-links a:hover{ border-color:var(--accent); }

/* The moon dial: a small live phase indicator, filled by the script. */
.moon-dial{
  display:flex; align-items:center; gap:.6rem;
  padding-left:1.4rem; border-left:1px solid var(--rule);
}
.moon-dial svg{ width:26px; height:26px; display:block; }
.moon-dial .moon-disc{ fill:var(--cream); stroke:var(--hedge-near); stroke-width:1; }
.moon-dial .moon-shadow{ fill:var(--hedge-near); }
.moon-dial .moon-text{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; }

.nav-toggle{ display:none; }

@media (max-width:900px){
  .nav-links, .moon-dial .moon-text{ display:none; }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:.5rem;
    background:rgba(251,248,238,.7); border:1px solid var(--hedge-near);
    color:var(--ink); border-radius:999px; font:inherit; font-size:.75rem;
    letter-spacing:.12em; text-transform:uppercase; padding:.5rem 1rem; cursor:pointer;
  }
  .nav.open .nav-links{
    display:flex; flex-direction:column; gap:1rem; align-items:flex-start;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(244,240,227,.97); padding:1.5rem var(--gutter) 2rem;
  }
  .moon-dial{ border-left:0; padding-left:0; }
}

/* ---------------- Hero shell ---------------- */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:7rem var(--gutter) 5rem;
  overflow:hidden; isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--hero-image);
  background-size:cover; background-position:var(--hero-position);
  background-color:#cdd2b4;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    100deg,
    rgba(244,240,227, var(--veil-bottom)) 0%,
    rgba(244,240,227, calc(var(--veil-bottom) * .72)) 34%,
    rgba(244,240,227, var(--veil-top)) 62%,
    rgba(244,240,227, calc(var(--veil-top) * .5)) 100%
  );
}
.hero-inner{ width:min(100%, 1180px); margin-inline:auto; position:relative; z-index:1; }
.col{ max-width:19ch; }

/* The dragon, recoloured to solid ink by filter, sitting above the veil but
   below every word. Occupies the right three fifths, centred vertically. */
.hero-mark{
  position:absolute; top:50%; right:var(--gutter); transform:translateY(-50%);
  width:60%; height:72%; z-index:0;
  background:var(--mark-image) no-repeat right center; background-size:contain;
  filter:brightness(0); opacity:var(--mark-strength);
  pointer-events:none;
}

.cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.4rem; }
.btn{
  display:inline-block; font-size:.78rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; padding:.9rem 1.8rem;
  border:1px solid currentColor; border-radius:999px;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-solid{ background:var(--accent); border-color:var(--accent); color:var(--cream); }
.btn-solid:hover{ background:var(--accent-lift); border-color:var(--accent-lift); }
.btn-ink{ color:var(--ink); }
.btn-ink:hover{ background:var(--ink); color:var(--page); }

.rule{ width:70px; height:1px; background:var(--ink); opacity:.35; margin:2rem 0; }

/* ---------------- Option A: line as hero, services as signpost ---------------- */
.o-a h1{ font-size:clamp(2.7rem, 5.4vw, 4.9rem); margin-bottom:1.5rem; }
.o-a h1 em{ font-style:italic; color:var(--hedge-near); }
.o-a .lede{ font-size:clamp(1.15rem,1.6vw,1.4rem); color:var(--ink-soft); max-width:32ch; margin:0; }
.o-a .services{
  margin-top:2.4rem; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--hedge-near); display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
}
.o-a .services span[aria-hidden]{ opacity:.45; }

/* ---------------- Option B: her name as hero ---------------- */
/* Let the column reach into the second quarter, so the intro reads easily and
   the two buttons sit side by side rather than stacked. Nudge --col-reach to
   taste; larger pushes the text nearer the dragon, smaller pulls it back. */
.o-b{ --col-reach:34rem; }
.o-b .col{ max-width:var(--col-reach); }
.o-b h1{ font-size:clamp(3rem, 6.4vw, 5.6rem); letter-spacing:-.02em; margin-bottom:1.6rem; }
.o-b .lede{ font-size:clamp(1.1rem,1.5vw,1.35rem); color:var(--ink-soft); max-width:42ch; margin:0; }


/* ---------------- Option C: the list as poem ---------------- */
.o-c .stack{ font-family:var(--display); font-variation-settings:var(--wonk); }
.o-c .stack span{
  display:block; font-size:clamp(2rem, 4.2vw, 3.6rem); line-height:1.12; color:var(--ink);
}
.o-c .stack span:nth-child(2){ color:var(--hedge-near); }
.o-c .stack span:nth-child(3){ color:var(--accent); }
.o-c .coda{ font-size:clamp(1.05rem,1.4vw,1.28rem); color:var(--ink-soft); max-width:30ch; margin:0; }

/* ---------------- Option D: one line only ---------------- */
.o-d h1{ font-size:clamp(2.4rem, 4.6vw, 4.2rem); font-style:italic; max-width:16ch; line-height:1.14; }
.o-d .whisper{
  margin-top:2.6rem; font-size:.74rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* ---------------- Home: one hero, four wordings, gently cycled ----------------
   Follows Option B's sizing throughout. The wording fades from one to the next
   every twenty seconds; the buttons stay put beneath as a steady anchor. Order
   and pace live in the four delays and the one duration below, so both are easy
   to change: reorder the delays to reorder the wordings, raise 80s to slow the
   whole cycle. A single hidden heading carries the meaning for search. */
.o-rotate{ --col-reach:34rem; }
.o-rotate .col{ max-width:var(--col-reach); }

/* Visually hidden, still read by search engines and screen readers. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Every wording is a full Option B block, heading then intro then buttons, and
   they all share one grid cell so the tallest sets the height and nothing below
   shifts as the words change. The script in index.php fades one out and the
   next in by toggling is-on; off slides stay put but silent. */
.hero-rotator{ display:grid; }
.hero-rotator .slide{
  grid-area:1 / 1;
  opacity:0; transform:translateY(7px);
  align-self:end;                 /* sit each wording at the foot of the shared cell */
  transition:opacity 1.2s ease, transform 1.2s ease;
  pointer-events:none;
}
.hero-rotator .slide.is-on{ opacity:1; transform:none; pointer-events:auto; }

.o-rotate .disp{
  font-family:var(--display); font-variation-settings:var(--wonk);
  font-weight:400; line-height:1.06; margin:0 0 1.6rem;
  font-size:clamp(3rem, 6.4vw, 5.6rem); letter-spacing:-.02em; color:var(--ink);
}
.o-rotate .disp em{ font-style:italic; color:var(--hedge-near); }
.o-rotate .lede{
  font-size:clamp(1.1rem,1.5vw,1.35rem); color:var(--ink-soft);
  max-width:42ch; margin:0;
}

/* Optional: keep the home hero buttons within view on browsers that clip them */
.hero-page .hero{ min-height:100dvh; }
.hero-page .hero-rotator .slide{ align-self:center; }

/* Honour a stated preference for less motion: the script holds on the first
   wording, and we drop the transition so nothing eases. */
@media (prefers-reduced-motion: reduce){
  .hero-rotator .slide{ transition:none; }
}

@media (max-width:760px){
  .col{ max-width:100%; }
  .hero-mark{ display:none; }   /* keep the text uncluttered on small screens */
  .hero{ min-height:88svh; padding-block:8rem 4rem; }
  .hero::after{
    background:linear-gradient(180deg,
      rgba(244,240,227, calc(var(--veil-top) * .55)) 0%,
      rgba(244,240,227, var(--veil-bottom)) 58%);
  }
}