/* --- The hero ---------------------------------------------------- */

.dhb-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* The world is behind the whole site now, so the hero only needs to
   clear a little ground for the words to stand on. */
.dhb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(52% 42% at 24% 44%, rgba(253,252,250,.78) 0%, rgba(253,252,250,0) 74%);
}

.dhb-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--dhb-space-xl) var(--dhb-space-lg);
}

.dhb-eyebrow {
  font-size: var(--dhb-step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dhb-ink-faint);
  margin-bottom: var(--dhb-space-md);
}

.dhb-hero__line {
  font-family: var(--dhb-font-display);
  font-size: clamp(2.75rem, 9.5vw, 7rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--dhb-ink);
  margin: 0 0 var(--dhb-space-md);
  max-width: 14ch;
}

.dhb-hero__said {
  display: block;
  cursor: text;
  animation: dhb-rise 1.4s var(--dhb-ease) both;
}

/* The blank they finish. A magenta seam, breathing. */
/* The whole line is the way in. Nothing moves, nothing is added, and a
   tap anywhere on it takes you to the flow. */
.dhb-hero__way {
  display: block;
  text-decoration: none;
  color: inherit;
  max-width: none;
}

.dhb-hero__blank {
  display: block;
  width: min(9ch, 46vw);
  height: 2px;
  margin-top: 0.28em;
  background: linear-gradient(90deg,
    var(--dhb-accent) 0%,
    var(--dhb-accent-bright) 55%,
    rgba(255, 92, 200, 0) 100%);
  animation: dhb-rise 1.4s var(--dhb-ease) 0.25s both, dhb-breathe 3.6s ease-in-out 1.8s infinite;
  transform-origin: left center;
  transition: width .6s var(--dhb-ease);
}

/* Approaching it, the seam reaches out. The only sign it is a way in. */
.dhb-hero__way:hover .dhb-hero__blank,
.dhb-hero__way:focus-visible .dhb-hero__blank { width: min(13ch, 62vw); }

.dhb-hero__way:focus-visible { outline: none; }
.dhb-hero__way:focus-visible .dhb-hero__said { color: var(--dhb-accent); }

.dhb-hero__sub {
  font-family: var(--dhb-font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.65rem);
  line-height: 1.45;
  color: var(--dhb-ink-soft);
  max-width: 30ch;
  animation: dhb-rise 1.4s var(--dhb-ease) 0.5s both;
}

@keyframes dhb-rise {
  from { opacity: 0; transform: translate3d(0, 1.2rem, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes dhb-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* A quiet mark that there is more below. */
.dhb-scroll {
  position: absolute;
  bottom: var(--dhb-space-md);
  left: 50%;
  width: 1px;
  height: 3rem;
  background: linear-gradient(180deg,
    rgba(174, 203, 226, 0) 0%,
    var(--dhb-sky-deep) 100%);
  animation: dhb-scroll-hint 2.8s ease-in-out infinite;
}

@keyframes dhb-scroll-hint {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 0.9;  transform: translateY(0.5rem); }
}

.dhb-clouds { display: none;
  position: absolute;
  inset: -10% -20%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.dhb-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.75;
}

.dhb-cloud--a {
  width: 70%;
  height: 38%;
  left: -18%;
  top: 14%;
  background: radial-gradient(closest-side, #ffffff 0%, rgba(255,255,255,0) 100%);
  animation: dhb-cloud-a 64s ease-in-out infinite alternate;
}

.dhb-cloud--b {
  width: 55%;
  height: 30%;
  right: -12%;
  top: 46%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 100%);
  animation: dhb-cloud-b 88s ease-in-out infinite alternate;
}

.dhb-cloud--c {
  width: 85%;
  height: 26%;
  left: 8%;
  bottom: -6%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 100%);
  animation: dhb-cloud-c 120s ease-in-out infinite alternate;
}

@keyframes dhb-cloud-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14%, -4%, 0) scale(1.14); }
}

@keyframes dhb-cloud-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-11%, 5%, 0) scale(1); }
}

@keyframes dhb-cloud-c {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to   { transform: translate3d(6%, -3%, 0) scale(1.1); }
}

/* --- The drifting declarations ------------------------------------ */

.dhb-drift {
  position: relative;
  height: 78vh;
  min-height: 32rem;
  overflow: hidden;
  margin-block: var(--dhb-space-lg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.dhb-drift__field { position: absolute; inset: 0; }

.dhb-drift__one {
  position: absolute;
  margin: 0;
  max-width: none;
  line-height: 1.3;
  white-space: normal;
  opacity: 0;
  animation: dhb-float linear infinite;
  text-wrap: balance;

}

@keyframes dhb-float {
  0%   { opacity: 0;    transform: translate3d(0, var(--dhb-from, 60vh), 0); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0;    transform: translate3d(0, var(--dhb-to, -30vh), 0); }
}

.dhb-drift__one--1 { left: 2%; width: min(26ch, 26vw); font-size: clamp(1.45rem, 2.9vw, 1.95rem); font-family: 'Handlee', cursive; animation-duration: 48s; animation-delay: -0s; }
.dhb-drift__one--2 { left: 52%; width: min(18ch, 18vw); font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-family: 'Covered By Your Grace', cursive; animation-duration: 48s; animation-delay: -4s; }
.dhb-drift__one--3 { left: 27%; width: min(18ch, 18vw); font-size: clamp(1.9rem, 3.5vw, 2.5rem); font-family: 'Allura', cursive; animation-duration: 48s; animation-delay: -8s; }
.dhb-drift__one--4 { left: 74%; width: min(26ch, 26vw); font-size: clamp(2.1rem, 3.9vw, 2.8rem); font-family: 'Licorice', cursive; animation-duration: 48s; animation-delay: -12s; }
.dhb-drift__one--5 { left: 15%; width: min(18ch, 18vw); font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-family: 'Oooh Baby', cursive; animation-duration: 48s; animation-delay: -16s; }
.dhb-drift__one--6 { left: 80%; width: min(18ch, 18vw); font-size: clamp(1.5rem, 2.8vw, 1.95rem); font-family: 'Handlee', cursive; animation-duration: 48s; animation-delay: -20s; }
.dhb-drift__one--7 { left: 64%; width: min(18ch, 18vw); font-size: clamp(1.35rem, 2.5vw, 1.7rem); font-family: 'Covered By Your Grace', cursive; animation-duration: 48s; animation-delay: -24s; }
.dhb-drift__one--8 { left: 5%; width: min(26ch, 26vw); font-size: clamp(1.95rem, 3.6vw, 2.55rem); font-family: 'Allura', cursive; animation-duration: 48s; animation-delay: -28s; }
.dhb-drift__one--9 { left: 77%; width: min(18ch, 18vw); font-size: clamp(2.05rem, 3.8vw, 2.7rem); font-family: 'Licorice', cursive; animation-duration: 48s; animation-delay: -32s; }
.dhb-drift__one--10 { left: 30%; width: min(26ch, 26vw); font-size: clamp(1.85rem, 3.3vw, 2.35rem); font-family: 'Oooh Baby', cursive; animation-duration: 48s; animation-delay: -36s; }
.dhb-drift__one--11 { left: 56%; width: min(18ch, 18vw); font-size: clamp(1.45rem, 2.7vw, 1.9rem); font-family: 'Handlee', cursive; animation-duration: 48s; animation-delay: -40s; }
.dhb-drift__one--12 { left: 38%; width: min(18ch, 18vw); font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-family: 'Covered By Your Grace', cursive; animation-duration: 48s; animation-delay: -44s; }

.dhb-leap--love      { color: var(--dhb-leap-love); }
.dhb-leap--work      { color: var(--dhb-leap-work); }
.dhb-leap--body      { color: var(--dhb-leap-body); }
.dhb-leap--voice     { color: var(--dhb-leap-voice); }
.dhb-leap--adventure { color: var(--dhb-leap-adventure); }

/* --- Bands -------------------------------------------------------- */

.dhb-band { padding-block: var(--dhb-space-lg); }

.dhb-band__title {
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em;
  color: var(--dhb-ink);
  margin-bottom: var(--dhb-space-md);
  max-width: 18ch;
}

.dhb-band__lead {
  font-family: var(--dhb-font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1.55;
  color: var(--dhb-ink-soft);
  max-width: 40ch;
}

.dhb-band--quiet .dhb-band__title { color: var(--dhb-heading); }

/* --- How it works -------------------------------------------------- */

.dhb-how { padding-block: var(--dhb-space-lg); }

.dhb-how h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--dhb-space-lg);
}

.dhb-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--dhb-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: dhb-step;
}

.dhb-step {
  max-width: none;
  margin: 0;
  counter-increment: dhb-step;
  position: relative;
  padding-top: var(--dhb-space-sm);
  border-top: 1px solid var(--dhb-sky);
}

.dhb-step::before {
  content: counter(dhb-step);
  position: absolute;
  top: calc(var(--dhb-space-sm) * -0.1);
  right: 0;
  font-family: var(--dhb-font-display);
  font-size: var(--dhb-step--1);
  color: var(--dhb-accent);
  opacity: 0.55;
}

.dhb-step h3 {
  margin-top: 0;
  font-size: var(--dhb-step-1);
  color: var(--dhb-ink);
}

.dhb-step p {
  font-size: var(--dhb-step--1);
  color: var(--dhb-ink-soft);
  line-height: 1.6;
}

/* --- Arriving ------------------------------------------------------ */

.dhb-arriving {
  padding-block: var(--dhb-space-xl);
  text-align: center;
}

.dhb-arriving .dhb-eyebrow { margin-bottom: var(--dhb-space-sm); }

.dhb-arriving__when {
  font-family: var(--dhb-font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dhb-ink);
  margin: 0 auto var(--dhb-space-md);
  max-width: none;
}

.dhb-arriving__note,
.dhb-arriving__mail {
  max-width: 34ch;
  margin-inline: auto;
  color: var(--dhb-ink-soft);
}

.dhb-arriving__mail { font-size: var(--dhb-step-1); }

/* --- Motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .dhb-clouds { display: none; display: none; }
  .dhb-scroll { animation: none; }

  .dhb-drift { height: auto; min-height: 0; -webkit-mask-image: none; mask-image: none; }
  .dhb-drift__field { position: static; }

  .dhb-drift__one {
    position: static;
    opacity: 1;
    animation: none;
    margin: 0 auto var(--dhb-space-sm);
    max-width: 30ch;
    font-size: var(--dhb-step-1);
    text-align: center;
  }
}

/* --- Phones -------------------------------------------------------- */

@media (max-width: 46rem) {

  .dhb-hero { min-height: 80vh; min-height: 80vh; }

  .dhb-drift { height: 54vh; min-height: 22rem; }

  /* Only five in the field now, and all five are meant to show. */

  .dhb-drift__one { max-width: min(13ch, 42vw); }

  .dhb-drift__one--1  { left:  8%; }
  .dhb-drift__one--3  { left: 44%; }
  .dhb-drift__one--5  { left:  4%; }
  .dhb-drift__one--8  { left: 24%; }
  .dhb-drift__one--11 { left: 50%; }
}

}

.dhb-words { padding-block: var(--dhb-space-lg) var(--dhb-space-xl); }

.dhb-words__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--dhb-space-lg) var(--dhb-space-md);
  grid-template-columns: repeat(2, 1fr);
  max-width: 58rem;
}

@media (max-width: 40rem) {
  .dhb-words__list { grid-template-columns: 1fr; }
}

.dhb-word {
  max-width: none;
  margin: 0;
  padding-top: var(--dhb-space-sm);
  border-top: 1px solid var(--dhb-sky);
}

.dhb-word__name {
  font-family: var(--dhb-font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: 0.09em;
  color: var(--dhb-accent);
  margin-bottom: 0.4rem;
  max-width: none;
}

.dhb-word__meaning {
  font-size: var(--dhb-step--1);
  line-height: 1.65;
  color: var(--dhb-ink-soft);
  max-width: 32ch;
  margin: 0;
}

.dhb-creed {
  padding-block: var(--dhb-space-lg);
}

.dhb-creed__title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--dhb-ink);
  margin-bottom: var(--dhb-space-md);
}

.dhb-creed p {
  font-family: var(--dhb-font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.65;
  color: var(--dhb-ink-soft);
  max-width: 42ch;
}

.dhb-creed__open {
  font-size: clamp(1.3rem, 3vw, 1.9rem) !important;
  color: var(--dhb-ink) !important;
  line-height: 1.35;
  margin-bottom: var(--dhb-space-md);
}

.dhb-creed__close {
  color: var(--dhb-heading) !important;
  padding-top: var(--dhb-space-sm);
}

/* A word from another language, with its meaning kept beside it. */
.dhb-term {
  font-weight: 600;
  color: var(--dhb-accent);
}

.dhb-term i {
  font-style: italic;
}

.dhb-term span {
  font-weight: 400;
  font-style: normal;
  color: var(--dhb-ink-faint);
  font-size: 0.86em;
}

/* ===========================================================================
   THE FLOATING DECLARATIONS

   Five rules from the Claude who built this world, and every one is right
   about handwriting specifically rather than type in general.

   1  EACH HAND ITS OWN SIZE. Allura, Licorice, Handlee, Covered By Your Grace
      and Oooh Baby are drawn at genuinely different scales. Set at one size,
      Licorice nearly disappears while Handlee looks enormous. His multipliers:
      a plain hand 1, Allura 1.42, Licorice 1.62.
   2  WIDTH IN ch, NEVER PIXELS. The only unit that stops a long sentence
      reaching sideways into its neighbour.
   3  ON A PHONE, FEWER AND LARGER. I had done the opposite and shrunk them.
      Fine scripts go faint below about 1.2rem. Six large sentences read
      beautifully; twelve small ones are noise.
   4  THE FINE ONES NEED MORE, or they vanish on her pale sky.
   5  LINE HEIGHT 1.3 AND text-wrap: balance. Handwriting needs more room than
      a printed face, and balance stops one word stranded on a second line.

   And never more than three degrees of rotation.
   =========================================================================== */

.dhb-drift__one{ line-height:1.3; text-wrap:balance; letter-spacing:0; }

/* The tall hands carry their own leading in the drawing. 1.3 on top of Allura
   or Licorice is what put her dance declaration over the top of the one below
   it. */
.dhb-drift__one--3,.dhb-drift__one--8{ line-height:1.08; }
.dhb-drift__one--4,.dhb-drift__one--9{ line-height:1.02; }
.dhb-drift__one--5,.dhb-drift__one--10{ line-height:1.18; }

.dhb-drift__one--1,.dhb-drift__one--6,.dhb-drift__one--11{ --hand:1;    }
.dhb-drift__one--2,.dhb-drift__one--7,.dhb-drift__one--12{ --hand:1.06; }
.dhb-drift__one--3,.dhb-drift__one--8                    { --hand:1.42; }
.dhb-drift__one--4,.dhb-drift__one--9                    { --hand:1.62; }
.dhb-drift__one--5,.dhb-drift__one--10                   { --hand:1.24; }

@media (min-width: 62rem){
  .dhb-drift{height: 82vh;height: 82svh;min-height:36rem}
  .dhb-drift__one{ font-size:calc(1.72rem * var(--hand,1)); width:min(24ch,26vw); }
  .dhb-drift__one--1,.dhb-drift__one--8,.dhb-drift__one--11{width:min(28ch,28vw)}
}

@media (min-width: 46.01rem) and (max-width: 61.99rem){
  .dhb-drift{height: 68vh;height: 68svh;min-height:30rem}
  .dhb-drift__one{ font-size:calc(1.54rem * var(--hand,1)); width:min(20ch,40vw); }
  .dhb-drift__one--4,.dhb-drift__one--6,
  .dhb-drift__one--9,.dhb-drift__one--12{display:none}
  .dhb-drift__one--1{left:3%}   .dhb-drift__one--2{left:54%}
  .dhb-drift__one--3{left:30%}  .dhb-drift__one--5{left:6%}
  .dhb-drift__one--7{left:50%}  .dhb-drift__one--8{left:26%}
  .dhb-drift__one--10{left:8%}  .dhb-drift__one--11{left:52%;width:min(24ch,44vw)}
}

@media (max-width: 46rem){
  .dhb-drift{height: 66vh;height: 66svh;min-height:28rem}
  .dhb-drift__one{
    font-size:calc(1.34rem * var(--hand,1));
    width:min(17ch,46vw);
    max-width:min(17ch,46vw);
  }
  .dhb-drift__one--4,.dhb-drift__one--6,.dhb-drift__one--7,
  .dhb-drift__one--9,.dhb-drift__one--10,.dhb-drift__one--12{display:none}
  /* Two lanes, and the six spread evenly through the forty-eight second
     cycle. Her dance and her job declaration were four seconds apart in the
     SAME lane, which is why one climbed over the other. */
  .dhb-drift__one--1 { left:3%;  animation-delay:0s   }
  .dhb-drift__one--3 { left:50%; animation-delay:-8s  }
  .dhb-drift__one--5 { left:4%;  animation-delay:-16s }
  .dhb-drift__one--8 { left:48%; animation-delay:-24s }
  .dhb-drift__one--11{ left:3%;  animation-delay:-32s; width:min(19ch,50vw); max-width:min(19ch,50vw) }
  .dhb-drift__one--2 { left:49%; animation-delay:-40s }
}

@media (max-width: 24rem){
  .dhb-drift__one{font-size:calc(1.24rem * var(--hand,1));width:min(15ch,48vw);max-width:min(15ch,48vw)}
}

/* a centimetre under the line that sets them up */
.dhb-drift{margin-block-start:-9.8rem}
@media (max-width: 61.99rem){ .dhb-drift{margin-block-start:-7rem} }
@media (max-width: 46rem){   .dhb-drift{margin-block-start:-9.4rem} }


/* Restored — caught by my own editing, and hers to keep. */
.dhb-word__say {
  font-family: var(--dhb-font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--dhb-ink-faint);
  margin-bottom: 0.6rem;
  max-width: none;
}

/* ---- the hero's three beats, hers ---- */
.dhb-hero__does{
  display:block;
  font-family:var(--dhb-font-display);
  font-size:clamp(1.4rem,4.8vw,2rem);
  line-height:1.18;
  color:var(--dhb-ink);
  letter-spacing:-.015em;
  margin-bottom:.6rem;
}
.dhb-hero__do{
  display:block;
  font-family:var(--dhb-font-display);
  font-size:clamp(1.16rem,3.4vw,1.5rem);
  line-height:1.25;
  color:var(--dhb-heading);
  letter-spacing:-.005em;
  margin-bottom:.35rem;
}
.dhb-hero__then{
  display:block;
  font-style:italic;
  font-family:var(--dhb-font-display);
  font-size:clamp(.98rem,2.5vw,1.12rem);
  line-height:1.5;
  color:var(--dhb-ink-soft);
}