/* The annotation layer — a second, human voice on top of the brand system.

   Loads LAST on the four marked pages, after styles.css and after any lane
   stylesheet (wholehearted.css, wholehearted-retreat.css,
   wholehearted-invite.css). Marked pages: /, /wholehearted,
   /wholehearted/tell-your-story, /wholehearted/retreat.

   It forks no token. --pen, --pen-lt and --hl are declared once, in the :root
   block of styles.css, which is this project's only token source.

   THE RULE THAT KEEPS THIS FROM BECOMING CLUTTER
   No pen mark in any section that already carries a coral hand-drawn accent
   (.u-ink or .built__connector). That excludes the hero of /, of /wholehearted
   and of /wholehearted/tell-your-story, and the Two lanes section of /. The
   brand already spent its hand-drawn budget in the hero of every page, and two
   hand-drawn languages in one eyeful reads as two people scribbling rather than
   as one person annotating. Permanently off limits as well: .wh-recognition
   (that passage names a man's shame), the .talk and .wh-close gradient bands,
   every h1/h2/.eyebrow/.wh-promise the design already emphasizes, and both
   private pages, /wholehearted/invite and /wholehearted/confirmed, which get
   zero marks at every breakpoint.

   VOICE — The Curator. It clarifies, it never praises. Impersonal, three to
   eight words, lowercase, no terminal period, no I / you / he / Shawn. Every
   note is decoration: it is aria-hidden, and it may never carry information the
   page does not already state.

   NOTHING HERE MEASURES ANYTHING. Every inline gesture anchors to a
   position:relative span in the flow, the same pattern .u-ink already uses in
   styles.css, so marks reflow with the text. Every animated path carries
   pathLength="1", so the dash values are font-independent and no
   getTotalLength() or getBoundingClientRect() call is needed. That is what
   makes the layer immune to webfont timing. For the same reason no annotation
   dimension is expressed in ch: a ch resolves against whatever font is loaded
   at layout time, and ch is already pervasive in this codebase. */

/* ------------------------------------------------------------------ *
 * 1. Vocabulary
 * ------------------------------------------------------------------ */

/* The anchor. An inline span around the marked phrase. nowrap keeps a lassoed
   or underlined phrase on one line so the gesture stays a single gesture. */
.a-anchor {
  position: relative;
  white-space: nowrap;
}
/* Highlighted phrases carry .a-hl directly and are never wrapped in .a-anchor:
   a highlight has no absolutely positioned child to anchor, and it must stay
   free to break across lines. box-decoration-break clones the swipe per line. */

/* Every drawn gesture. Absolute, decorative, inert. */
.a-mark {
  position: absolute;
  color: var(--pen);
  pointer-events: none;
  overflow: visible;
}

/* Handwritten notes. rem max-widths, never ch. */
.a-note {
  position: absolute;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(.98rem, 1.5vw, 1.12rem);
  line-height: 1.25;
  max-width: 15rem;
  /* Anchors set nowrap so a gesture stays one gesture. A note hung off one of
     those anchors must be allowed to wrap again. */
  white-space: normal;
  color: var(--pen);
  pointer-events: none;
  z-index: 2;
}

/* Highlighter. The angled, faded ends are what make it read as a marker rather
   than a highlight rectangle. Permitted over #2A2A2A and --ink only, never over
   --muted: 4.6:1 clears AA but the swipe visibly muddies grey type.
   No pointer-events rule here on purpose — this class sits on real text, and
   pointer-events:none would break selecting it. */
.a-hl {
  background-image: linear-gradient(101deg,
      rgba(var(--hl), 0) .6%, rgba(var(--hl), .64) 2.4%,
      rgba(var(--hl), .64) 97.2%, rgba(var(--hl), 0) 99.3%);
  background-size: 100% 58%;
  background-position: 0 76%;
  background-repeat: no-repeat;
  padding: 0 .14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Blocks that carry an absolutely positioned mark of their own. */
.a-anchor-block { position: relative; }

/* ------------------------------------------------------------------ *
 * 2. Motion — the mark is written in as it arrives
 * ------------------------------------------------------------------ */

.a-mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s ease-out;
}
.a-mark.is-drawn path { stroke-dashoffset: 0; }

.a-hl {
  background-size: 0 58%;
  transition: background-size .6s ease-out;
}
.a-hl.is-drawn { background-size: 100% 58%; }

/* Notes fade rather than draw. There is no stroke to animate. */
.a-note { opacity: 0; transition: opacity .4s ease-out; }
.a-note.is-drawn { opacity: 1; }

/* ------------------------------------------------------------------ *
 * 3. The nine marks
 * ------------------------------------------------------------------ */

/* --- 1 · / · #built-work · lasso around "seven-year" + note --------
   The credibility of the card sits in one hyphenated word inside a 0.95rem
   --muted description a skimmer reads as boilerplate. */
.a-mark--lasso1 {
  left: -11px;
  width: calc(100% + 25px);
  aspect-ratio: 110 / 34;
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
}
/* The note hangs under the whole card grid, not under the marked card. The
   grid is auto-fit minmax(), so the card count and the column count both
   change the number of rows: a note anchored to the card lands on the row
   beneath it the moment a card is added. Anchored to the grid it always sits
   in the section's own bottom padding, which is clear at every width. */
.a-note--1 {
  top: calc(100% + 18px);
  right: 0;
  transform: rotate(-2.5deg);
}
/* The card grid rewraps at widths that are not breakpoints. Below 1024px the
   band under the grid is too shallow for the note; below 760px the grid is one
   column, the phrase can wrap, and the lasso itself goes. Hiding a mark on
   small screens is always acceptable — the layer is enhancement, never content. */
@media (max-width: 1023px) { .a-note--1 { display: none; } }
@media (max-width: 759.98px) { .a-mark--lasso1 { display: none; } }

/* --- 2 · / · .story · highlighter + note --------------------------
   The thesis of the whole brand, sitting as the last eight words of a long
   paragraph at #2A2A2A. Nothing in the design points at it. */
.a-anchor--story { position: relative; }
.a-note--2 {
  left: calc(var(--pad) - 12px);
  bottom: 0;
  transform: rotate(3deg);
}
/* One column below 760px, and below 1024px the left column is too short to
   hold a note clear of the heading. Highlight only. */
@media (max-width: 1023px) { .a-note--2 { display: none; } }

/* --- 3 · / · .work · gutter note ----------------------------------
   The section lists three ways to work with him and never says the list is
   closed. Said quietly, in the dead margin, turned on its side.
   ANNOTATION-ONLY BREAKPOINT: 1280px. Below it no page gutter is wide enough
   to hold a rotated note clear of the text column. */
.a-gutter {
  position: absolute;
  left: 4px;
  bottom: 64px;
  max-width: none;
  white-space: nowrap;
  transform-origin: 0 0;
  transform: rotate(-90deg) rotate(2.5deg);
}
@media (max-width: 1279.98px) { .a-gutter { display: none; } }

/* --- 4 · /wholehearted · .wh-thesis · bracket + note --------------
   The method is stated exactly once, mid-paragraph, at body scale. The
   pull-quote below it is off limits, which is what makes this the target.
   The bracket sits in the page gutter beside the paragraph's closing lines,
   anchored to the paragraph block rather than to the inline phrase: an
   absolutely positioned child of a mid-line inline span would land on the
   sentence before it. Height is in em so it tracks the line box. */
.a-mark--bracket {
  left: calc(-1 * var(--pad) + 8px);
  bottom: .1em;
  width: 18px;
  height: 2.4em;
  transform: rotate(4deg);
}
/* The note rides above the portrait in the right column. An absolutely
   positioned box placed past its containing block's right edge has no room to
   shrink into, so every margin note in this file takes an explicit width in
   rem rather than a max-width. */
.a-note--4 {
  left: calc(100% + 28px);
  top: -2.6em;
  width: 11rem;
  transform: rotate(-3.5deg);
}
@media (max-width: 1023.98px) { .a-note--4 { display: none; } }
/* Under 760px the gutter is 20 to 38px wide, so the bracket comes in and comes
   down in scale to stay clear of the first character of every line. */
@media (max-width: 759.98px) {
  .a-mark--bracket {
    left: calc(-1 * var(--pad) + 5px);
    width: 11px;
    height: 2.2em;
  }
}

/* --- 5 · /wholehearted · .wh-doors · underline + note -------------
   The most unusual four words on the page, sitting last in a small grey card.
   This is not the .u-ink path. Different mark, different hand. */
.a-mark--underline {
  left: -8%;
  width: 116%;
  bottom: -.3em;
  height: .5em;
  transform: rotate(-2.5deg);
}
.a-door { position: relative; }
.a-note--5 {
  top: calc(100% + 16px);
  left: 4px;
  transform: rotate(2.5deg);
}
@media (max-width: 1023.98px) { .a-note--5 { display: none; } }

/* --- 6 · /wholehearted · .wh-capture · caret + note ---------------
   Literal fine print, and the entire trust proposition of the email capture.
   The caret is 2.2px, under the 2.3 to 2.7 body range on purpose: the marked
   type is 0.95rem --muted and a 2.5px caret sets as a bar beside it.
   Caret and note both sit under the fine print, inside the text column, so
   width never matters and this mark survives every breakpoint intact. */
.a-mark--caret {
  left: 50%;
  top: calc(100% + 3px);
  width: 22px;
  height: 13.5px;
  margin-left: -11px;
  transform: rotate(5deg);
}
/* The note is anchored to the paragraph, not to the caret's span, because the
   span sits at the far right of the line on a wide screen and at the start of
   line two on a narrow one. Anchored to the span it would run off the left
   edge of a phone. The offset walks it under the caret, and min() stops its
   right edge ever passing the paragraph's, so it cannot overflow. */
.a-note--6 {
  left: min(17rem, 100% - 13rem);
  top: calc(100% + 24px);
  width: 13rem;
  transform: rotate(-4.5deg);
}
/* Below this the fine print wraps and the marked phrase starts line two, so
   the note aligns to the paragraph instead of chasing the phrase. */
@media (max-width: 429.98px) { .a-note--6 { left: 0; } }

/* --- 7 · /wholehearted/tell-your-story · lasso + note -------------
   The most anxiety-reducing line on a page read by someone deciding whether to
   say the hardest thing out loud, buried as the third bullet of four.
   Path drawn independently from mark 1. */
.a-mark--lasso7 {
  left: -24px;
  width: calc(100% + 60px);
  aspect-ratio: 175 / 36;
  top: 50%;
  transform: translateY(-50%) rotate(3deg);
}
.a-li { position: relative; }
.a-note--7 {
  left: calc(100% + 22px);
  top: -.2em;
  width: 13rem;
  transform: rotate(-3deg);
}
@media (max-width: 1023.98px) { .a-note--7 { display: none; } }

/* --- 8 · /wholehearted/tell-your-story · note + arrow -------------
   A two-word caption under a full-width photograph. Maximum burial.
   The head is a clear open V at roughly 30 degrees with a 7:1 head-to-shaft
   ratio: a head that hugs its shaft reads as a check mark.
   The photograph bottoms out 19px above the caption's text box, so the arrow is
   flattened rather than scaled down: preserveAspectRatio="none" plus
   vector-effect="non-scaling-stroke" keeps the stroke a true 2.6px while the
   sweep lies down along the caption line. The head stays a 32 degree open V. */
.a-mark--arrow {
  left: calc(100% + 12px);
  top: -1.05em;
  width: 104px;
  height: 30px;
  transform: rotate(2.5deg);
}
.a-note--8 {
  left: calc(100% + 130px);
  top: -.1em;
  width: 16rem;
  transform: rotate(-4deg);
}
/* Under 760px there is no clear space right of the caption, so the pair drops
   below it. The arrow shortens, flips, and points back up at the caption. */
@media (max-width: 759.98px) {
  .a-mark--arrow {
    left: 0;
    top: calc(100% + 8px);
    width: 62px;
    height: 22px;
    transform: scaleY(-1) rotate(4deg);
  }
  /* 64px of clear band between the caption and the booking lead at 320px, so
     the note sits beside the arrow rather than under it, and takes a shallower
     tilt to keep its rotated box inside that band. */
  .a-note--8 {
    left: 72px;
    top: calc(100% + 12px);
    width: 11rem;
    transform: rotate(-2.5deg);
  }
}

/* --- 9 · /wholehearted/retreat · .whr-hero · highlighter + note ---
   The page's credibility rests on the absence of urgency, and the sentence
   that establishes it is mid-paragraph body copy.
   98deg, not mark 2's 101deg. No two marks on this site share a gradient
   angle or a path. .wh-hero sets overflow:hidden, so the note stays inside
   the section box by anchoring to the paragraph, never past .wrap. */
.a-hl--9 {
  background-image: linear-gradient(98deg,
      rgba(var(--hl), 0) .6%, rgba(var(--hl), .64) 2.4%,
      rgba(var(--hl), .64) 97.2%, rgba(var(--hl), 0) 99.3%);
}
.a-note--9 {
  left: calc(100% + 22px);
  top: -.1em;
  width: 11rem;
  transform: rotate(3.5deg);
}
@media (max-width: 1023.98px) { .a-note--9 { display: none; } }

/* ------------------------------------------------------------------ *
 * 4. Reduced motion
 * ------------------------------------------------------------------ *
 * wholehearted.css already carries `.wh * { transition: none !important }`.
 * That !important beats a later non-important rule, so `transition: none`
 * alone would freeze every mark at stroke-dashoffset:1 and every highlight at
 * background-size:0 — rendering them invisible rather than still. These rules
 * set the FINAL drawn state explicitly, and with !important, so a reduced-
 * motion visitor sees every mark already written. */
@media (prefers-reduced-motion: reduce) {
  .a-mark path { stroke-dashoffset: 0 !important; transition: none !important; }
  .a-hl { background-size: 100% 58% !important; transition: none !important; }
  .a-note { opacity: 1 !important; transition: none !important; }
}