/* BrainON Tools: shared geometry for the two hub pages only.
   Load last on /notes/ and /designer-tools/. Artwork and accordion JS stay intact. */
.author-notes-page,
.designer-tools-page {
  --tools-hero-height: 0px;
  --tools-motto-width: 400px;
  --tools-motto-height: 220px;
  --tools-art-clearance: 422px;
  --tools-intro-space: 106.08px;
  --tools-card-height: 104px;
  --tools-toolbar-top: 22px;
  --tools-toolbar-height: 38px;
  --tools-toolbar-bottom: 18px;
  padding-bottom: 76px;
}

.author-notes-page .an-wrap,
.designer-tools-page .dt-wrap {
  width: min(1110px, calc(100% - 40px));
  margin: 0 auto;
}

.author-notes-page .an-hero,
.designer-tools-page .dt-hero {
  display: block;
  min-height: var(--tools-hero-height);
  padding: 38px 0 30px;
}

.author-notes-page .an-hero-copy,
.designer-tools-page .dt-hero-copy { max-width: 690px; }

.author-notes-page .an-eyebrow,
.designer-tools-page .dt-eyebrow {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.15;
}
.author-notes-page .an-eyebrow::before,
.designer-tools-page .dt-eyebrow::before { content: none; }

.author-notes-page .an-title,
.designer-tools-page .dt-title {
  margin: 24px 0 30px;
  min-height: 61.44px;
  font-size: clamp(48px, 5.1vw, 64px);
  line-height: .96;
}

.author-notes-page .an-intro,
.designer-tools-page .dt-intro {
  /* No fixed 500px cap: allow the hero copy to use its available width. */
  max-width: none;
  min-height: var(--tools-intro-space);
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.56;
}

/* Author Notes: prevent the longer SEO intro from running into the right-hand artwork.
   At desktop sizes keep a bounded copy column; on mobile the existing
   full-width responsive layout remains in charge. */
@media (min-width: 1361px) {
  .author-notes-page .an-intro { max-width: min(610px, 100%); }
}

/* Both existing handwritten images occupy one equally sized slot.
   No image is regenerated, cropped, split, masked or recoloured. */
.author-notes-page .an-hero-motto,
.designer-tools-page .dt-hero-motto {
  position: absolute;
  top: 0px;
  right: calc(var(--tools-art-clearance) - (100vw - 100%) / 2);
  bottom: auto;
  left: auto;
  display: block;
  width: calc(var(--tools-motto-width) * 0.6);

  height: var(--tools-motto-height);
  margin: 0;
  object-fit: contain;
  object-position: center;
  transform: rotate(-1deg);
  transform-origin: 50% 50%;
}
/* Designer Tools keeps its full-size handwritten artwork. */
.designer-tools-page .dt-hero-motto {
  width: var(--tools-motto-width);
}
.author-notes-page .an-hero-motto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.author-notes-page .an-content-plane,
.designer-tools-page .dt-content-plane {
  height: calc(var(--tools-toolbar-top) + var(--tools-toolbar-height) + var(--tools-toolbar-bottom));
}

/* Keep the first card level with the other hub without adding fake filters. */
.author-notes-page .an-list {
  margin: calc(var(--tools-toolbar-top) + var(--tools-toolbar-height) + var(--tools-toolbar-bottom)) 0 0;
}
.designer-tools-page .dt-filterbar {
  min-height: var(--tools-toolbar-height);
  margin: var(--tools-toolbar-top) 0 var(--tools-toolbar-bottom);
  padding: 0;
}
.author-notes-page .an-list,
.designer-tools-page .dt-list { gap: 11px; }

.author-notes-page .an-trigger,
.designer-tools-page .dt-trigger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 142px 24px;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  min-height: 60px;
  gap: 16px;
  align-items: center;
  padding: 10px 18px;
}

.author-notes-page .an-type-icon,
.designer-tools-page .dt-type-icon {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
}
.author-notes-page .an-type-icon img { width: 32px; height: 32px; }

/* Articles keep their height; the existing SVG grows inside that height.
   Quick Notes deliberately retain their compact, single-heading row. */
.author-notes-page .an-trigger {
  grid-template-columns: 96px minmax(0, 1fr) 142px 24px;
  height: var(--tools-card-height);
  min-height: var(--tools-card-height);
  padding-top: 4px;
  padding-bottom: 4px;
}
.author-notes-page .an-type-icon,
.author-notes-page .an-type-icon img { width: 96px; height: 96px; }
.designer-tools-page .dt-trigger { height: auto; }

.author-notes-page .an-heading,
.designer-tools-page .dt-item-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
.author-notes-page .an-heading { min-height: 0; }
.author-notes-page .an-item-title,
.designer-tools-page .dt-item-title {
  display: -webkit-box;
  min-height: 0;
  overflow: hidden;
  font-size: 21px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.designer-tools-page .dt-item-title {
  margin: 0;
}
.author-notes-page .an-teaser {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.35;
}

.author-notes-page .an-date,
.designer-tools-page .dt-badge {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0;
}
.author-notes-page .an-chevron,
.designer-tools-page .dt-chevron {
  grid-column: 4;
  grid-row: 1;
  align-self: center;
  width: 22px;
  height: 22px;
}

.author-notes-page .an-copy,
.designer-tools-page .dt-copy {
  padding: 8px 26px 24px 73px;
  font-size: 16px;
  line-height: 1.65;
}
.author-notes-page .an-copy { padding-left: 130px; }

.author-notes-page .an-copy-with-practice,
.designer-tools-page .dt-copy-with-practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 30px;
}

.author-notes-page .an-share,
.designer-tools-page .dt-share {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 18px;
  margin-top: 28px;
  padding: 18px 22px;
}
.author-notes-page .an-share-icon,
.designer-tools-page .dt-share-icon { width: 48px; height: 48px; padding: 11px; }
.author-notes-page .an-share-button,
.designer-tools-page .dt-share-button {
  min-width: 154px;
  min-height: 43px;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid #cb3340;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.3;
}
.author-notes-page .an-share-button span,
.designer-tools-page .dt-share-button span { font-size: 18px; line-height: 1; }

@media (max-width: 1360px) and (min-width: 1181px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 132.6px; }
  .author-notes-page .an-intro,
  .designer-tools-page .dt-intro { max-width: 420px; }
}

/* Keep the note beside the copy while there is usable room between the
   text and the existing artwork. Its size scales at tablet widths only. */
@media (min-width: 901px) and (max-width: 1180px) {
  .author-notes-page,
  .designer-tools-page {
    --tools-art-edge: 415px;
    --tools-wrap-gutter: max(20px, calc((100vw - 1110px) / 2));
    --tools-motto-width: 328px;
    --tools-motto-height: 180px;
    --tools-art-clearance: 370px;
    --tools-intro-space: 106.08px;
  }
  .author-notes-page .an-intro,
  .designer-tools-page .dt-intro {
    max-width: min(495px, calc(100vw - var(--tools-art-edge) - 270px - var(--tools-wrap-gutter)));
  }
}
@media (min-width: 981px) and (max-width: 1130px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 132.6px; }
}
@media (min-width: 981px) and (max-width: 1050px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 159.12px; }
}
@media (min-width: 981px) and (max-width: 1000px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 185.64px; }
}
@media (min-width: 901px) and (max-width: 980px) {
  .author-notes-page,
  .designer-tools-page {
    --tools-art-edge: 330px;
    --tools-art-clearance: 285px;
    --tools-intro-space: 132.6px;
  }
}
@media (min-width: 901px) and (max-width: 940px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 159.12px; }
}
/* In the narrow transition to mobile, a separate row avoids collisions.
   Existing still-life and branch CSS is deliberately untouched. */
@media (min-width: 821px) and (max-width: 900px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 132.6px; }
  .author-notes-page .an-hero-copy,
  .designer-tools-page .dt-hero-copy { max-width: 480px; }
  .author-notes-page .an-intro,
  .designer-tools-page .dt-intro { max-width: 440px; }
  .author-notes-page .an-hero-motto,
  .designer-tools-page .dt-hero-motto {
    position: relative;
    top: auto;
    right: auto;
    margin: -70px 0 0 auto;
  }
}

@media (max-width: 900px) {
  .author-notes-page .an-copy-with-practice,
  .designer-tools-page .dt-copy-with-practice { grid-template-columns: 1fr; gap: 0; }
  .author-notes-page .an-practice,
  .designer-tools-page .dt-practice { max-width: 520px; }
}

/* One mobile breakpoint for both hubs, including the old 768–820px mismatch. */
@media (max-width: 820px) {
  .author-notes-page,
  .designer-tools-page {
    --tools-hero-height: 0px;
    --tools-motto-width: 360px;
    --tools-motto-height: 220px;
    --tools-intro-space: 74.4px;
    --tools-card-height: 128px;
    --tools-toolbar-top: 12px;
    --tools-toolbar-bottom: 16px;
    padding-bottom: 48px;
  }
  .author-notes-page .an-wrap,
  .designer-tools-page .dt-wrap { width: min(1110px, calc(100% - 24px)); }
  .author-notes-page .an-hero,
  .designer-tools-page .dt-hero { padding: 28px 0 22px; }
  .author-notes-page .an-hero-copy,
  .designer-tools-page .dt-hero-copy { max-width: none; }
  .author-notes-page .an-title,
  .designer-tools-page .dt-title { margin: 18px 0 24px; min-height: 0; font-size: 43px; }
  .author-notes-page .an-intro,
  .designer-tools-page .dt-intro { max-width: none; font-size: 16px; line-height: 1.55; }
  .author-notes-page .an-hero-motto,
  .designer-tools-page .dt-hero-motto {
    position: relative;
    top: auto;
    right: auto;
    width: min(var(--tools-motto-width), 100%);
    margin: 20px 0 0 auto;
  }
  .author-notes-page .an-trigger,
  .designer-tools-page .dt-trigger {
    grid-template-columns: 30px minmax(0, 1fr) 22px;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 6px 11px;
    padding: 12px 13px;
  }
  .author-notes-page .an-type-icon,
  .designer-tools-page .dt-type-icon { grid-column: 1; grid-row: 1 / 3; width: 27px; height: 27px; }
  .author-notes-page .an-type-icon img { width: 27px; height: 27px; }
  .author-notes-page .an-trigger { grid-template-columns: 81px minmax(0, 1fr) 22px; }
  .author-notes-page .an-type-icon,
  .author-notes-page .an-type-icon img { width: 81px; height: 81px; }
  .designer-tools-page .dt-trigger { height: auto; min-height: 82px; }
  .author-notes-page .an-heading,
  .designer-tools-page .dt-item-title { grid-column: 2; grid-row: 1; }
  .author-notes-page .an-item-title,
  .designer-tools-page .dt-item-title { font-size: 18px; line-height: 1.25; }
  .author-notes-page .an-teaser { font-size: 14px; }
  .author-notes-page .an-date,
  .designer-tools-page .dt-badge { grid-column: 2; grid-row: 2; justify-self: start; margin: 0; }
  .author-notes-page .an-date { font-size: 12px; text-align: left; }
  .designer-tools-page .dt-badge { width: max-content; min-width: 0; }
  .author-notes-page .an-chevron,
  .designer-tools-page .dt-chevron { grid-column: 3; grid-row: 1 / 3; }
  .author-notes-page .an-copy,
  .designer-tools-page .dt-copy { padding: 4px 16px 20px 54px; font-size: 15px; }
  .author-notes-page .an-copy { padding-left: 16px; }
  .author-notes-page .an-copy-with-practice,
  .designer-tools-page .dt-copy-with-practice { display: block; }
  .author-notes-page .an-share,
  .designer-tools-page .dt-share { grid-template-columns: 44px minmax(0, 1fr); gap: 13px; padding: 16px; }
  .author-notes-page .an-share-icon,
  .designer-tools-page .dt-share-icon { width: 42px; height: 42px; padding: 10px; }
  .author-notes-page .an-share-button,
  .designer-tools-page .dt-share-button { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 600px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 99.2px; }
}

@media (max-width: 430px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 124px; }
}

@media (max-width: 360px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 148.8px; }
}

@media (max-width: 390px) {
  .author-notes-page .an-title,
  .designer-tools-page .dt-title { font-size: 39px; }
  .author-notes-page .an-copy,
  .designer-tools-page .dt-copy { padding-left: 16px; }
  .author-notes-page .an-practice,
  .designer-tools-page .dt-practice { grid-template-columns: 32px minmax(0, 1fr); padding: 14px; }
  .author-notes-page .an-tip-icon,
  .designer-tools-page .dt-tip-icon { width: 30px; height: 30px; }
}

/* v3: user-approved artwork positions; do not change card geometry. */
@media (min-width: 821px) {
  .designer-tools-page .dt-hero-still-life {
    top: -120px;
    right: calc((100vw - 100%) / -1.6);
    width: 540px;
    z-index: 3;
  }
  .author-notes-page .an-hero-still-life {
    top: -50px;
    width: 650px;
    right: calc((100vw - 100%) / -1.6);
  }
  .author-notes-page .an-hero-motto {
    right: calc(var(--tools-art-clearance) - (100vw - 100%) / 4);
  }
}
/* The content plane must cover artwork that extends below the hero.
   The filter and cards remain above the plane. */
.designer-tools-page .dt-content-plane { z-index: 5; }
.designer-tools-page .dt-filterbar,
.designer-tools-page .dt-list { position: relative; z-index: 8; }

/* v10: the intact still-life overlaps the content background instead of being
   covered by the former gray overlay. Keep actual cards above the artwork. */
.designer-tools-page .dt-content-plane { display: none; }
.designer-tools-page .dt-hero { z-index: 1; }
.designer-tools-page .dt-filterbar,
.designer-tools-page .dt-list,
.designer-tools-page .dt-share { position: relative; z-index: 8; }

/* v12: Author Notes still-life may overlap the gray content area, as on Designer Tools. */
.author-notes-page .an-content-plane { display: none; }
.author-notes-page .an-hero { z-index: 1; }
.author-notes-page .an-list,
.author-notes-page .an-share { position: relative; z-index: 8; }

/* ==== tools-hero-v4 (2026-10-16): Price-style geometry for both hub heroes ====
   One rule for all laptop/desktop widths instead of fixed pixel sizes.
   --tl  = left edge of the 1110px column (viewport gutter).
   --a   = width of the still life; it shrinks with the screen.
   The still life is cropped by the right edge of the screen by a fixed share of its own width,
   and the handwritten note keeps a fixed place to the left of it (all values are shares of --a),
   so the whole group shrinks like one picture. The intro stops 24px before the note.
   At 1920/1680 the group looks as before. Phones (820px and below) are not touched. */
@media (min-width: 821px) {
  /* Both intros now take 4 lines at almost every width (3 at 962-980px and from 1868px):
     one shared height keeps the first card of both hubs on the same level. */
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 106.08px; }
  .author-notes-page .an-hero,
  .designer-tools-page .dt-hero { --tl: max(20px, 50vw - 555px); }
  .designer-tools-page .dt-hero { --a: min(540px, 34.9vw - 20px); }
  .author-notes-page .an-hero { --a: min(650px, 38vw - 22px); }

  .designer-tools-page .dt-hero-still-life {
    top: calc(var(--a) * -.222);
    right: calc(-1 * var(--tl) - var(--a) * .17);
    width: var(--a);
    height: auto;
  }
  .author-notes-page .an-hero-still-life {
    top: calc(var(--a) * -.077);
    right: calc(-1 * var(--tl) - var(--a) * .15);
    width: var(--a);
    height: auto;
  }

  .designer-tools-page .dt-hero-motto {
    top: calc(var(--a) * -.0056);
    right: calc(var(--a) * .917 - var(--tl));
    width: calc(var(--a) * .53);
    height: auto;
    object-fit: fill;
  }
  .author-notes-page .an-hero-motto {
    top: calc(var(--a) * .024);
    right: calc(var(--a) * .965 - var(--tl));
    width: calc(var(--a) * .369);
    height: auto;
  }
  .author-notes-page .an-hero-motto img { height: auto; }

  .designer-tools-page .dt-hero-copy,
  .author-notes-page .an-hero-copy { max-width: none; }
  .designer-tools-page .dt-intro {
    max-width: min(690px, calc(100vw - var(--a) * 1.433 - 24px - var(--tl)));
  }
  .author-notes-page .an-intro {
    max-width: min(610px, calc(100vw - var(--a) * 1.316 - 24px - var(--tl)));
  }
}

/* Small laptops and tablets (821-1180px), owner's 16.10 notes for 1024px: the branch is hidden;
   the still life is larger and, as on wider screens, its top goes under the menu bar; the
   handwritten note is larger and moves next to the title, its left part over the end of the intro
   (about 45% of the note), its right end close to the still life. The intro ends under the note. */
@media (min-width: 821px) and (max-width: 1180px) {
  .designer-tools-page .dt-hero .an-hero-branch,
  .author-notes-page .an-hero-branch { display: none; }

  .designer-tools-page .dt-hero { --a: min(480px, 48vw); --w: calc(var(--a) * .47); }
  .author-notes-page .an-hero { --a: min(560px, 50vw); --w: calc(var(--a) * .39); }

  .designer-tools-page .dt-hero-motto,
  .author-notes-page .an-hero-motto {
    position: absolute;
    margin: 0;
  }
  .designer-tools-page .dt-hero-motto {
    top: calc(4px - var(--w) * .049);
    right: calc(var(--a) * .83 + 8px - var(--tl));
    width: var(--w);
  }
  /* Owner, 16.10: a little to the left (closer to the title) and lower (off the typewriter's top).
     Left by 18% of its width, but never closer than 20px to the title (narrowest tablets).
     Lower by 11% of its width (31% from the image's top), but its bottom stays 10px above the intro. */
  .author-notes-page .an-hero-motto {
    top: min(calc(4px + var(--w) * .041), calc(157px - var(--w) * .723));
    right: calc(var(--a) * .85 + 10px - var(--w) * .028 + min(var(--w) * .18, 39.5vw - 313px) - var(--tl));
    width: var(--w);
  }

  .designer-tools-page .dt-intro {
    max-width: calc(100vw - var(--a) * .83 - 10px - var(--w) * .531 - var(--tl));
  }
  .author-notes-page .an-intro {
    max-width: calc(100vw - var(--a) * .85 - 10px - var(--w) * .508 - var(--tl));
  }
}
/* Narrowest tablets: a slightly smaller still life keeps the note clear of the title. */
@media (min-width: 821px) and (max-width: 899px) {
  .designer-tools-page .dt-hero { --a: 45vw; }
}
/* Here the intros are narrower: Author Notes takes 5 lines (6 below 841px). Both hubs keep the
   same intro height, so the first card stays on the same level on both pages. */
@media (min-width: 821px) and (max-width: 1026px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 132.6px; }
}
@media (min-width: 821px) and (max-width: 840px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 159.12px; }
}
/* Same shadow as on Price: the light area "lies above" the dark hero and casts a shadow up onto it.
   A strip in the content colour sits right under the hero; its shadow is clipped to the part above
   it. The still life stays above the strip (it lies on the light area), the cards stay above all. */
.designer-tools-page .dt-hero::before,
.author-notes-page .an-hero::before { box-shadow: none; }
.designer-tools-page .dt-hero::after,
.author-notes-page .an-hero::after {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  width: 100vw;
  height: 24px;
  background: #e9e9e9;
  box-shadow: 0 0 9px 1px rgba(0, 0, 0, .3);
  clip-path: inset(-16px 0 4px 0);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}
@media (max-width: 767px) {
  .designer-tools-page .dt-hero::after,
  .author-notes-page .an-hero::after { height: 20px; }
}
/* Phones and small tablets (owner, 16.10): the handwritten note sits right under the intro, about
   12px below its last line, and the hero gets shorter. The intro no longer keeps a reserved height
   here (that reserve only levelled the first card of both hubs on wide screens). */
@media (max-width: 820px) {
  .author-notes-page,
  .designer-tools-page { --tools-intro-space: 0px; }
  /* Designer Tools (owner, 16.10, second note): higher still, and no branch on phones.
     -38px puts the top of "design" about 8px under the last line of the intro; checked at every
     width from 320 to 820px that no stroke touches the text (the words slope up to the right). */
  .designer-tools-page .dt-hero-motto { margin-top: -38px; margin-bottom: -10px; }
  .designer-tools-page .dt-hero .an-hero-branch { display: none; }
  .author-notes-page .an-hero-motto { margin-top: -12px; }
}
/* ==== /tools-hero-v4 ==== */