/* ══════════════════════════════════════════════════════
   expertise.css — An atlas of commercial perception
   Builds on atlas.css (tokens, header, cartouche, footer).

   Layout modes
   · ≥ 621px  Tableau    four engraved plates; each discipline
                         is a region of the plate with a label
                         cartouche pinned to it.
   · ≤ 620px  Manuscript the plates unbind into a single column
                         field guide: plate heading, then each
                         cropped drawing with its label beneath.
══════════════════════════════════════════════════════ */

#atlas { padding-top: var(--site-header-height); }

/* ── opening ─────────────────────────────────────── */
.atlas-opening {
  position: relative;
  max-width: 1440px;
  margin: auto;
  padding: 32px var(--gutter) 24px;
  text-align: center;
}
.atlas-opening .atlas-eyebrow { margin: 64px 0 24px; }
.atlas-opening h1 { letter-spacing: -.044em; }
.opening-line { margin: 28px auto 0; }
.atlas-tools {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin: 32px auto 0;
}
.atlas-index { position: relative; z-index: 40; text-align: left; }
.atlas-index summary {
  list-style: none;
  cursor: pointer;
}
.atlas-index summary::-webkit-details-marker,
.atlas-place summary::-webkit-details-marker { display: none; }
.atlas-index summary > span { display: inline-block; transition: transform .25s var(--ease); }
.atlas-index[open] summary > span { transform: rotate(45deg); }
.atlas-index nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 460px;
  padding: 18px 24px;
  columns: 2;
  column-gap: 28px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--hairline), 0 18px 30px -24px rgba(var(--ink-rgb), .45);
}
.atlas-index nav a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 40px;
  padding: 8px 0;
  break-inside: avoid;
  font: 500 17px/1.25 var(--serif);
  text-decoration: none;
}
.atlas-index nav a:hover { text-decoration: underline; }
.atlas-index nav span { font: 500 var(--t-micro)/1 var(--sans); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.reading-note { margin-top: 28px; font-size: 17px; font-style: italic; color: var(--ink-soft); }
.mobile-instruction { display: none; }
.opening-mark { position: absolute; right: 9%; top: 193px; width: 69px; transform: rotate(10deg); color: var(--ink-soft); }
.opening-mark svg { display: block; fill: none; stroke: var(--ink); stroke-width: .7; opacity: .7; }
.opening-mark span { display: block; font-size: 15px; font-style: italic; white-space: nowrap; transform: rotate(-10deg); }

/* ── the plates ──────────────────────────────────── */
.atlas-world { max-width: 1600px; margin: 0 auto; }
.atlas-plate {
  position: relative;
  width: 100%;
  aspect-ratio: var(--plate-ratio);
  isolation: isolate;
  scroll-margin-top: calc(var(--site-header-height) + 12px);
}
.atlas-plate:first-child { margin-top: 28px; }
.atlas-plate:has(.atlas-place[open]) { z-index: 40; }   /* notes may cross into the next plate */
.plate-ground {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: url('#atlas-ink');
}
.atlas-plate:first-child .plate-ground { mask-image: linear-gradient(to bottom, transparent, #000 5%, #000); }
.atlas-plate:last-child  .plate-ground { mask-image: linear-gradient(to bottom, #000 94%, transparent); }

/* plate heading — set into open sky, deliberately unboxed:
   in the atlas a frame means "this opens", and titles don't. */
.plate-caption {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 300px;
  padding: 16px 30px 18px;
  text-align: center;
  background: radial-gradient(closest-side, var(--paper) 62%, rgba(243, 238, 227, 0));
  background: radial-gradient(closest-side, var(--paper) 62%, color-mix(in srgb, var(--paper) 0%, transparent));
}
.plate-number {
  font: 500 var(--t-micro)/1 var(--sans);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.plate-caption h2 {
  margin-top: 8px;
  font-size: clamp(22px, 1.7vw, 27px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.plate-line {
  margin: 9px auto 0;
  padding-top: 9px;
  border-top: 1px solid var(--hairline-strong);
  font-size: 17px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}
.plate-1 .plate-caption { left: 37%; top: 10%; }
.plate-2 .plate-caption { left: 39%; top: 19%; }
.plate-3 .plate-caption { left: 42%; top: 10%; }
.plate-4 .plate-caption { left: 36%; top: 4%; }

/* ── a discipline: region + label ────────────────── */
.atlas-place {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  scroll-margin-top: 110px;
}
.atlas-place[open] { z-index: 30; }
.atlas-place summary {
  position: relative;
  display: block;
  aspect-ratio: var(--art-ratio);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The specimen re-prints the plate's region on top of it;
   at rest it is invisible, on focus it deepens the ink so
   the chosen drawing lifts from the landscape. */
.specimen {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s ease;
}
.atlas-place:is(:hover, :focus-within, [open]) .specimen { opacity: .16; }

.annotation {
  position: absolute;
  bottom: 0;
  left: 10%;
  display: block;
  width: max-content;
  max-width: min(320px, 100%);
  padding: 11px 16px 12px;
  color: var(--ink);
  background: var(--veil);
  border: 1px solid var(--hairline-strong);
  box-shadow: 0 0 0 3px var(--veil), 0 0 0 4px var(--hairline);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.atlas-place:is(:hover, :focus-within, [open]) .annotation {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--veil), 0 0 0 4px var(--hairline-strong), 0 14px 26px -20px rgba(var(--ink-rgb), .55);
}
.atlas-place summary:focus-visible { outline: none; }
.atlas-place summary:focus-visible .annotation { outline: 2px solid var(--ink); outline-offset: 7px; }

.annotation-line {
  position: absolute;
  left: 43%;
  bottom: calc(100% + 2px);
  width: 110px;
  height: 36px;
  fill: none;
  stroke: var(--ink);
  stroke-width: .8;
  stroke-dasharray: 175;
  stroke-dashoffset: 175;
  pointer-events: none;
  transition: stroke-dashoffset .65s ease;
}
.atlas-place:is(:hover, :focus-within, [open]) .annotation-line { stroke-dashoffset: 0; }

.place-number {
  display: block;
  margin-bottom: 5px;
  font: 500 var(--t-micro)/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.place-name {
  display: block;
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.place-descriptor {
  display: block;
  margin-top: 4px;
  font-size: clamp(16px, 1.15vw, 18px);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}
.inspect {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font: 500 var(--t-micro)/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.inspect-mark {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .3s var(--ease);
}
.inspect-open { display: none; }
.atlas-place[open] .inspect-closed { display: none; }
.atlas-place[open] .inspect-open { display: inline; }
.atlas-place[open] .inspect-mark { transform: rotate(45deg); }

/* hand-set label positions, tuned to each drawing */
@media (min-width: 621px) {
  #brand-image             .annotation { bottom: 7%;   left: 8%; }
  #aesthetic-orchestration .annotation { bottom: -13%; left: 9%; }
  #brand-voice             .annotation { bottom: 2%;   left: 20%; }
  #seo                     .annotation { bottom: 3%;   left: 4%; }
  #aeo                     .annotation { bottom: 7%;   left: 9%; }
  #competitive-analysis    .annotation { bottom: -18%; left: 1%; }
  #marketing-strategy      .annotation { bottom: 3%;   left: 5%; }
  #guerrilla-marketing     .annotation { bottom: 0;    left: 0; }
  #email-marketing         .annotation { bottom: 8%;   left: 23%; }
  #sms-marketing           .annotation { bottom: 2%;   left: 7%; }
  #business-consulting     .annotation { bottom: 5%;   left: 10%; }
  #copywriting             .annotation { bottom: 0;    left: 17%; }
}

/* ── field note ──────────────────────────────────── */
.field-note {
  position: absolute;
  top: calc(100% + 14px);
  left: 8%;
  width: 360px;
  max-width: calc(100vw - 40px);
  padding: 18px 22px 20px;
  background: var(--paper-raised);
  border: 1px solid var(--hairline-strong);
  border-top: 2px solid var(--ink);
  box-shadow: 0 22px 40px -28px rgba(var(--ink-rgb), .6);
  font: 400 var(--t-note)/1.62 var(--sans);
  color: var(--ink);
}
.atlas-place--east .field-note { left: auto; right: 4%; }
/* labels that hang below their drawing push the note down with them */
@media (min-width: 621px) {
  #aesthetic-orchestration .field-note { top: calc(113% + 14px); }
  #competitive-analysis    .field-note { top: calc(118% + 14px); }
}
.field-note-reference {
  margin-bottom: 10px;
  font: italic 500 18px/1.25 var(--serif);
  color: var(--ink-soft);
}
.field-note a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-top: 10px;
  font-size: var(--t-ui);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
}
.field-note a:hover { border-bottom-color: var(--ink); }

/* ── colophon ────────────────────────────────────── */
.atlas-colophon {
  position: relative;
  max-width: 1200px;
  margin: 80px auto 0;
  padding: 30px 24px 70px;
  text-align: center;
}
.atlas-colophon .atlas-eyebrow { margin-bottom: 24px; }
.atlas-colophon h2 { font-size: clamp(3.2rem, 1.8rem + 4.6vw, 5.4rem); }
.atlas-colophon p:not(.atlas-eyebrow) { margin: 26px auto 0; font-size: var(--t-body); line-height: 1.5; }
.correspondence-link { margin-top: 28px; }

@media (hover: none) {
  .atlas-place .annotation-line { display: none; }
}

/* ══════════════════════════════════════════════════
   Narrow tableau (621–1100px): the plates are smaller
   than the labels were designed for, so labels shed
   their descriptor and become compact name tags.
══════════════════════════════════════════════════ */
@media (min-width: 621px) and (max-width: 1100px) {
  .opening-mark { right: 5%; width: 49px; }
  .place-descriptor { display: none; }
  .annotation { padding: 8px 12px 9px; box-shadow: 0 0 0 2px var(--veil), 0 0 0 3px var(--hairline); }
  .place-name { font-size: clamp(18px, 2.2vw, 23px); }
  .inspect { margin-top: 7px; }
  .field-note { width: 300px; }
  .plate-caption { max-width: 210px; padding: 10px 14px 12px; }
  .plate-caption h2 { font-size: 20px; }
  .plate-line { font-size: 15px; }
}
@media (min-width: 621px) and (max-width: 860px) {
  #atlas { padding-top: var(--site-header-height-mobile); }
  .place-number { font-size: 11px; margin-bottom: 3px; }
  .place-name { font-size: 17px; }
  .inspect { display: none; }
  .annotation-line { width: 62px; height: 26px; }
  .field-note { width: 280px; padding: 14px 16px 16px; font-size: 14px; }
  .plate-caption { max-width: 170px; padding: 8px 12px 10px; }
  .plate-caption h2 { font-size: 17px; margin-top: 6px; }
  .plate-line { display: none; }
  .plate-1 .plate-caption { left: 38%; top: 10%; }
  .plate-2 .plate-caption { left: 40%; top: 18%; }
  .plate-3 .plate-caption { left: 43%; top: 8%; }
  .plate-4 .plate-caption { left: 37%; top: 3%; }
  .atlas-colophon { margin-top: 48px; }
}

/* ══════════════════════════════════════════════════
   Manuscript (≤ 620px): one column, read top to bottom.
══════════════════════════════════════════════════ */
@media (max-width: 620px) {
  #atlas { padding-top: var(--site-header-height-mobile); }
  .atlas-opening { padding: 24px 22px 32px; }
  .atlas-opening .atlas-eyebrow { margin: 44px 0 20px; }
  .atlas-opening h1 { font-size: clamp(42px, 11.5vw, 60px); line-height: 1.02; }
  .atlas-opening h1 em { display: inline-block; max-width: 340px; }
  .opening-line { max-width: 300px; margin-top: 20px; }
  .opening-mark { display: none; }
  .atlas-tools { gap: 22px; margin-top: 24px; }
  .ink-link { gap: 10px; font-size: var(--t-small); }
  .atlas-index nav { width: min(350px, calc(100vw - 32px)); right: -8px; padding: 12px 16px; column-gap: 16px; }
  .atlas-index nav a { font-size: 16px; min-height: 44px; }
  .reading-note { font-size: 16px; margin-top: 20px; }
  .desktop-instruction { display: none; }
  .mobile-instruction { display: inline; }

  .atlas-world { max-width: 560px; }
  .atlas-plate {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    padding: 8px 20px 24px;
    scroll-margin-top: calc(var(--site-header-height-mobile) + 8px);
  }
  .atlas-plate:first-child { margin-top: 0; }
  .plate-ground { display: none; }

  /* plate heading opens its chapter */
  .plate-caption {
    position: relative;
    left: auto !important;
    top: auto !important;
    align-self: center;
    max-width: 300px;
    margin: 28px 0 36px;
    background: transparent;
    border: 0;
    outline: 0;
  }
  .plate-caption h2 { font-size: 30px; }
  .plate-line { font-size: 18px; }

  .atlas-place {
    position: relative;
    left: auto;
    top: auto;
    width: 88%;
    max-width: 400px;
    margin: 0 0 40px;
    scroll-margin-top: 80px;
  }
  .atlas-place:nth-of-type(2) { margin-left: auto; }
  .atlas-place:nth-of-type(3) { margin-left: 6%; }
  #email-marketing { width: 100%; max-width: none; margin-left: 0; }
  .atlas-place summary { aspect-ratio: auto; }
  .specimen,
  .atlas-place:is(:hover, :focus-within, [open]) .specimen {
    opacity: 1;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent),
                linear-gradient(to bottom, transparent, #000 5%, #000 92%, transparent);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }
  .atlas-place .annotation {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    margin: -6px 6px 0;
    padding: 12px 16px 13px;
  }
  .place-name { font-size: 27px; }
  .place-descriptor { font-size: 17px; }
  .inspect { min-height: 28px; margin-top: 8px; }
  .annotation-line { display: none; }
  .field-note,
  .atlas-place--east .field-note {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
    margin: 14px 6px 0;
    padding: 16px 16px 18px;
    box-shadow: none;
  }
  .atlas-colophon { margin-top: 8px; padding: 20px 22px 56px; }
  .atlas-colophon h2 { font-size: 60px; }
  .atlas-colophon p:not(.atlas-eyebrow) { max-width: 300px; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .specimen { transform: none !important; }
}

@media print {
  .site-header, .atlas-tools, .reading-note, .inspect, .skip-link { display: none !important; }
  #atlas { padding-top: 0; }
  .atlas-place { break-inside: avoid; }
}