.landmarkPage [hidden] { display: none !important; }
.landmarkIntro { max-width: 760px; margin: 40px 0 30px; }
.landmarkPage .landmarkEyebrow { font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1.5; color: #32666b; margin: 0 0 12px; }
.landmarkPage .landmarkIntro h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.16; letter-spacing: -.035em; }
.landmarkStudy { border: 1px solid #d8e0df; border-radius: 12px 12px 0 0; overflow: hidden; background: #f7f9f8; }
.landmarkPage [data-category] { --tab-bg: #edf0fa; --tab-selected: #dce3f6; --tab-ink: #414c78; --tab-border: #8294c7; }
.landmarkPage [data-category="chest"] { --tab-bg: #eaf3ed; --tab-selected: #d6eadd; --tab-ink: #315c45; --tab-border: #699c7b; }
.landmarkPage [data-category="pelvis"] { --tab-bg: #fbf0e8; --tab-selected: #f7e0ce; --tab-ink: #795031; --tab-border: #bc9168; }
.landmarkPage [data-category="arms"] { --tab-bg: #f4edf7; --tab-selected: #e9daf0; --tab-ink: #694979; --tab-border: #aa83b9; }
.landmarkPage [data-category="legs"] { --tab-bg: #e9f3f6; --tab-selected: #d4e9f0; --tab-ink: #325e6e; --tab-border: #72a1b2; }
.landmarkTabs { position: relative; z-index: 1; display: flex; align-items: stretch; gap: 5px; margin-bottom: -3px; padding: 8px 12px 3px; overflow-x: auto; scrollbar-width: thin; }
.landmarkTabs button { position: relative; flex: 1 0 120px; min-height: 60px; margin-top: 6px; padding: 12px 10px; border: 3px solid var(--tab-border); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--tab-bg); color: var(--tab-ink); text-align: center; font: 700 15px/1.35 "Source Sans 3", "Segoe UI", sans-serif; cursor: pointer; }
.landmarkTabs button[aria-selected="true"] { margin-top: 0; background: var(--tab-bg); }
.landmarkTabs button[aria-selected="true"]::after { content: ""; position: absolute; right: 0; bottom: -3px; left: 0; height: 3px; background: var(--tab-bg); }
.landmarkTabs button:hover { background: var(--tab-selected); }
.landmarkFigure { margin: 0; padding: 20px; }
.landmarkPhoto { background: #383838; border-radius: 6px; }
.landmarkPhoto img { display: block; width: 100%; height: auto; border-radius: inherit; }
.landmarkComparison { position: relative; aspect-ratio: var(--photo-aspect, 3 / 2); overflow: hidden; isolation: isolate; }
.landmarkComparison #landmark-underlay { position: absolute; inset: 0; height: 100%; object-fit: fill; }
.landmarkComparison.landmarkComparisonPortrait { max-width: 560px; margin-inline: auto; }
.landmarkComparison .landmarkRegionOverlay { position: absolute; inset: 0; height: 100%; object-fit: contain; pointer-events: none; background: transparent; }
.landmarkUnderlayPlaceholder { filter: grayscale(1) contrast(1.25) brightness(1.1); }
.landmarkComparison .landmarkPhotoTop { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--reveal)) 0 0); }
.landmarkAnnotation { position: absolute; inset: 0; pointer-events: none; }
.landmarkPointer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 2px #0009); }
.landmarkPointer polyline { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.landmarkPointerTip { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #173338; box-shadow: 0 1px 3px #0008; transform: translate(-50%, -50%); }
.landmarkCallout { position: absolute; max-width: 35%; box-sizing: border-box; padding: 8px 11px; border: 1px solid #fff; border-radius: 6px; background: #173338f2; color: #fff; font: 700 clamp(12px, 2vw, 14px)/1.35 "Source Sans 3", "Segoe UI", sans-serif; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 2px 6px #0004; }
.landmarkCompareLabel { position: absolute; top: 12px; padding: 6px 10px; border-radius: 5px; background: #173338d9; color: #fff; font: 700 12px/1.4 "Source Sans 3", "Segoe UI", sans-serif; pointer-events: none; }
.landmarkCompareOriginal { left: 12px; }
.landmarkCompareStudy { right: 12px; }
.landmarkCompareDivider { position: absolute; top: 0; bottom: 0; left: var(--reveal); width: 3px; background: #0AC2CC; box-shadow: 0 0 4px #01415b80; transform: translateX(-50%); pointer-events: none; }
.landmarkCompareDivider img { position: absolute; top: 50%; left: 50%; width: 88px; height: 28px; object-fit: cover; object-position: center; border-radius: 0; transform: translate(-50%, -50%) rotate(90deg); filter: drop-shadow(0 2px 3px #0008); }
.landmarkCompareRange { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.landmarkComparison:has(.landmarkCompareRange:focus-visible) { outline: 3px solid var(--tab-ink); outline-offset: 4px; }
.landmarkCompareRange:disabled { cursor: wait; }
.landmarkPage .landmarkImageError { margin-top: 12px; color: #87371e; }
.landmarkPanel { border: 3px solid var(--tab-border); border-radius: 0; background: #fff; padding: 24px; }
.landmarkRegion { scroll-margin-top: 24px; }
.landmarkPage .landmarkRegion h3 { margin: 0; padding: 12px 16px; border-left: 4px solid var(--tab-border); border-radius: 6px; background: var(--tab-bg); color: var(--tab-ink); font-weight: 700; }
.landmarkGuideTable { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 16px; line-height: 1.55; }
.landmarkGuideTable :is(th, td) { padding: 12px 10px; border-bottom: 1px solid #e0e7e5; text-align: left; vertical-align: top; }
.landmarkGuideTable th { background: var(--tab-selected); color: var(--tab-ink); font-weight: 700; }
.landmarkGuideTable tbody tr:nth-child(even) { background: var(--tab-bg); }
.landmarkGuideTable td:first-child { width: 40%; font-weight: 600; color: var(--tab-ink); }
.landmarkNameButton { display: inline-block; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 2px solid var(--tab-ink); border-radius: 999px; background: var(--tab-bg); color: var(--tab-ink); font: 700 15px/1.4 "Source Sans 3", "Segoe UI", sans-serif; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.landmarkNameButton:hover { background: var(--tab-selected); }
.landmarkNameButton[aria-pressed="true"] { background: var(--tab-ink); color: #fff; box-shadow: 0 0 0 3px var(--tab-selected); }
.landmarkNameButton:active { border-color: var(--tab-border); }
.landmarkGuide { max-width: 790px; margin: 48px auto 20px; scroll-margin-top: 24px; }
.landmarkPage .landmarkGuide h2 { border: 0; padding: 0; }
.landmarkPage :is(#comparing-proportions, #triangulation, #plumb-lines-and-alignment) { font-weight: 700; }
.landmarkPage :is(button, a):focus-visible { outline: 3px solid #ad6d17; outline-offset: 4px; }
@media (max-width: 850px) {
  .landmarkFigure { padding: 14px; }
  .landmarkPhoto { max-width: 680px; margin: 0 auto; }
  .landmarkIntro { margin-top: 28px; }
}
@media (max-width: 520px) {
  .landmarkCompareDivider img { width: 64px; height: 24px; }
  .landmarkTabs { padding: 8px 10px 3px; }
  .landmarkTabs button { font-size: 14px; }
  .landmarkGuideTable { font-size: 14px; }
  .landmarkGuideTable :is(th, td) { padding: 10px 6px; }
  .landmarkPanel { padding: 20px 16px; }
  .landmarkPage .landmarkIntro h1 { font-size: 29px; }
  .landmarkPage .landmarkIntro p:not(.landmarkEyebrow) { font-size: 17px; }
}

.landmarkOverlayReveal .landmarkPhotoTop { clip-path: none; }
.landmarkOverlayReveal .landmarkRegionOverlay { clip-path: inset(0 0 0 var(--reveal)); }