/* Bayiler - il atlasi ve kayit defteri.
   Yon kaynagi: docs/research/reseller-directions/01-province-atlas-ledger.png.
   Operator selection, 2026-07-31.

   This sheet belongs to the reseller directory only. Colour and type tokens
   come from the `:root` block in `style.css`; nothing global is defined here,
   only the local variables this surface needs.

   The page is an atlas next to a ledger, and they do different jobs on purpose.
   The ledger is the thing somebody came for: eleven readable records with a
   telephone number that is impossible to miss. The atlas is the thing they did
   not know: seven of those eleven are in Istanbul and four provinces have one
   each. Direction 01 asks for exactly one sharply bounded dark panel along an
   edge of the paper sheet, so the atlas takes it, and the whole rest of the
   page stays paper.

   The atlas is drawn from real boundaries and its marks sit at real districts.
   That is the condition Operational Cartography puts on a map - it must carry
   a business fact - and it is why this page has one where the measure
   direction it replaces did not. */

/* Bricolage Grotesque, for the dealer names and the region headings only.

   It was already in `assets/fonts/` with its licence and had never been wired
   up to anything, which is what the operator meant by a better face that is
   already in the system. It is declared here rather than in `style.css`
   because `style.css` belongs to the closing chrome pass and because no other
   page needs it: a `@font-face` costs nothing on a page that never asks for
   the family.

   It ships as the 400 KB variable TTF it arrived as. There is no subsetter and
   no woff2 compressor on this machine, so it could not be cut down; it is
   `swap`, so it blocks nothing, and the record is readable in Inter Tight from
   the first paint. Worth revisiting when a build machine has `fonttools`. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-latin-ext-400-800-v1.woff2")
    format("woff2");
}

.ledger,
.handover {
  --font-name: "Bricolage Grotesque", "Inter Tight", sans-serif;
  --hair: var(--line);
  --hair-strong: var(--line-strong);
}

/* The header carries a ground on this page.

   It is fixed and transparent by default, which works on a page whose top is
   quiet. This one has a record every eighty pixels, so addresses and telephone
   numbers were sliding up behind the navigation and reading through it. The
   site already has the mechanism - a section asks for a ground with
   `data-nav-surface`, and `main.js` puts it on the header - and it ships one
   ground, graphite. This is the paper one, declared here because it belongs to
   this page and `style.css` belongs to the closing chrome pass.

   Nothing else about the header changes: the bar is painted behind its own
   content, so the ink and the theme rules are untouched. */
.site-header[data-surface="paper"]::before {
  background: var(--paper-bright);
  opacity: 1;
}

.site-header[data-surface="paper"] {
  border-bottom: 1px solid var(--line);
}

/* ---------- The sheet ---------- */

/* The sheet material. The colour is a layer underneath the fibre rather than
   something the image supplies, so a 404 on the texture costs the grain and
   nothing else - `FACT-007` records the build where a missing fill erased the
   element it was filling.

   Tiled at a fixed size, not stretched with `cover`. `cover` sizes a texture
   against the element, and this page's elements are long: the ledger runs past
   2400px, so a 933px-tall sheet was being blown up two and a half times and the
   fibre came back as smeared blobs. The operator called that out on the atlas
   panel, where a 322px-wide rail was upscaling its texture 2.1x and it was
   worst. Both fields are now four-way mirrored tiles, so they repeat with no
   seam and every pixel is drawn at or below its own resolution. */
.ledger,
.handover {
  background-color: var(--paper-bright);
  background-image: url("../img/resellers/reseller-atlas-sheet-v2.jpg");
  background-image: image-set(
    url("../img/resellers/reseller-atlas-sheet-v2.webp") type("image/webp"),
    url("../img/resellers/reseller-atlas-sheet-v2.jpg") type("image/jpeg")
  );
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 620px;
  color: var(--ink);
}

.handover__inner {
  padding: 0 clamp(22px, 3.4vw, 64px);
}

/* ---------- The board ---------- */

/* Atlas on the left, records on the right, and the board runs the full width of
   the window.

   It was centred inside the site's 1360px measure to begin with, which put a
   map, a list and two hundred pixels of empty paper on either side of them into
   the middle of a wide screen. A directory is a working surface: the operator
   asked for the outside of the page, so the rail now starts at the left edge
   and the records end at the right one.

   There is no gap between the two either. The dark rail meets the paper column
   on a hard edge, which is what direction 01 asks a proof panel to do - it is
   an edge of the sheet, not a card floating near one. The records carry their
   own reading margin instead, because text against a window edge is not a
   reading surface at any width. */
.ledger {
  padding: calc(var(--header-height) + clamp(18px, 2vw, 30px)) 0
    clamp(40px, 5vw, 78px);
  display: grid;
  grid-template-columns: clamp(300px, 26vw, 430px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

.records {
  padding: 0 clamp(22px, 3.4vw, 64px);
}

/* ---------- The proof edge ---------- */

/* The one dark surface on the page. Its own palette is restated here rather
   than borrowed from the paper tokens: on graphite the accent has to be
   `--signal-orange-invert`, and a hairline has to be light on dark, so nothing
   above this line applies inside it. */
/* What the entrance is about to animate, held back until it can.

   `resellers.js` takes the class off in the same breath as it writes the
   opening state of every tween, so nothing is ever hidden by both and nothing
   is ever hidden by neither. The list is the acts of the entrance, in order.
   An element that gains an act gains a line here, or it flashes. */
.intro-armed .atlas__inner,
.intro-armed .expand,
.intro-armed .expand__ghost,
.intro-armed .atlas__label,
.intro-armed .screen,
.intro-armed .region__head,
.intro-armed .dealer {
  visibility: hidden;
}

.atlas {
  --atlas-ink: var(--paper-bright);
  --atlas-muted: var(--muted-invert);
  --atlas-line: rgba(255, 255, 255, 0.17);
  --atlas-line-strong: rgba(255, 255, 255, 0.34);
  --atlas-mark: var(--signal-orange-invert);
  color: var(--atlas-ink);
}

/* The panel is what is painted, and it is the panel that sticks.

   The grid item behind it runs the height of the board, and painting the
   graphite on that is what put a dark field under the header: the site header
   is fixed and transparent by design, so whatever is under it shows through,
   and on this page that was a dark rail sliding up behind a dark logo. The
   theme system cannot fix it either - `data-nav-theme` flips the whole nav, and
   only a third of this viewport's width is dark.

   So the graphite belongs to the sticky block instead. It starts below the
   header and stays there: it never travels under the navigation at any scroll
   position, and it is a panel that stays put rather than a column that slides.
   Operator instruction, 2026-07-31.

   The cap and the overflow are for the open state. An open plate makes this
   panel tall, and a panel taller than the viewport that is stuck to the top has
   a bottom nobody can ever reach. */
.atlas__inner {
  position: sticky;
  top: calc(var(--header-height) + 14px);
  max-height: calc(100vh - var(--header-height) - 28px);
  overflow-y: auto;
  /* Not `overscroll-behavior: contain`. The panel normally fits, so there is
     nothing to scroll and the wheel goes to the page - but on a short viewport
     containing the overscroll stops the page dead as soon as the pointer
     crosses the rail, which reads as a broken scroll rather than as a
     considerate one. */
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2vw, 30px)
    clamp(22px, 2.4vw, 30px);
  background-color: var(--graphite);
  background-image: url("../img/resellers/reseller-proof-rail-v2.jpg");
  background-image: image-set(
    url("../img/resellers/reseller-proof-rail-v2.webp") type("image/webp"),
    url("../img/resellers/reseller-proof-rail-v2.jpg") type("image/jpeg")
  );
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 520px;
  scrollbar-width: thin;
  scrollbar-color: var(--atlas-line-strong) transparent;
}

/* ---------- A province plate ---------- */

/* At rest the lead province spans the rail and the other four sit two by two
   under it, which is the seven-versus-one distribution stated as area. Once one
   is open on the right it leaves the rail, and the four that remain re-lay
   themselves at one size - there is no lead province while a province is open,
   because the open one is the subject. */
.atlas__plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(10px, 1.2vw, 16px);
}

.atlas__plates > :first-child {
  grid-column: 1 / -1;
}

.atlas[data-open] .atlas__plates > :first-child {
  grid-column: auto;
}

/* Not `display: none`. The coverage stipple is defined inside the first rail
   map, and a paint server referenced out of an unrendered subtree resolves to
   nothing in Chrome - hiding that plate that way emptied every province field
   on the page, including the open one. It is collapsed instead, so it is still
   rendered and still a paint server. */
.atlas__plate[data-open] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* The whole map is the control: the dots are not targets and were never going
   to be, so the plate itself opens. */
.atlas__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.atlas__open:focus-visible {
  outline: 1px solid var(--atlas-mark);
  outline-offset: 3px;
}

/* The province field is the affordance. A map that can be pressed has to say so
   before it is pressed, and on a dark rail the only thing that reads at a
   glance is the boundary itself: it brightens to the accent, the dealer marks
   come up to full, and the name follows. GSAP carries the boundary and the
   marks because they are the two things the reader is looking at; the label is
   left to the sheet, which was already doing it. */
.atlas__open .atlas__field,
.atlas__open .atlas__mark {
  will-change: opacity;
}

.atlas__open:hover .atlas__city,
.atlas__open:focus-visible .atlas__city {
  color: var(--atlas-mark);
}

.atlas__open:hover .atlas__label,
.atlas__open:focus-visible .atlas__label {
  border-top-color: var(--atlas-mark);
}

/* ---------- The leaders ---------- */

.atlas__leader {
  cursor: pointer;
}

.atlas__leader-line {
  fill: none;
  stroke: var(--atlas-line-strong);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.18s ease;
}

.atlas__leader-end {
  fill: var(--atlas-line-strong);
  transition: fill 0.18s ease;
}

.atlas__leader-name {
  font-family: var(--font-ui);
  font-size: 6.6px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--atlas-ink);
  transition: fill 0.18s ease;
}

.atlas__leader:hover .atlas__leader-line,
.atlas__leader:focus-visible .atlas__leader-line,
.atlas__leader[data-active] .atlas__leader-line {
  stroke: var(--atlas-mark);
}

.atlas__leader:hover .atlas__leader-end,
.atlas__leader:focus-visible .atlas__leader-end,
.atlas__leader[data-active] .atlas__leader-end {
  fill: var(--atlas-mark);
}

.atlas__leader:hover .atlas__leader-name,
.atlas__leader:focus-visible .atlas__leader-name,
.atlas__leader[data-active] .atlas__leader-name {
  fill: var(--atlas-mark);
}

.atlas__leader:focus {
  outline: none;
}

/* While one province is open the four in the rail hold their place and step
   back, so the shape of the network is still readable and switching to another
   is one press. */
.atlas[data-open] .atlas__plate:not([data-open]) {
  opacity: 0.55;
  transition: opacity 0.28s ease;
}

.atlas[data-open] .atlas__plate:not([data-open]):hover,
.atlas[data-open] .atlas__plate:not([data-open]):focus-within {
  opacity: 1;
}

.atlas__map {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* The province field. The stipple states coverage inside the boundary and
   nowhere else, which is the difference between a map that carries a fact and
   a map used as wallpaper. */
.atlas__field {
  fill: url(#atlas-stipple);
  stroke: var(--atlas-line-strong);
  stroke-width: 0.7;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.24s ease;
}

/* The stipple has to be visible enough that a field reads as covered ground
   and quiet enough that it never competes with a mark. */
.atlas__stipple {
  fill: rgba(190, 180, 168, 0.5);
}

.atlas__plate[aria-current="true"] .atlas__field,
.atlas__plate[data-engaged] .atlas__field {
  stroke: var(--atlas-mark);
}

/* One dealer, one mark. They are small because five of the seven Istanbul
   dealers sit within a few kilometres of the strait and a bigger mark would
   merge them into one blob - the cluster is the fact, so it has to stay a
   cluster of countable points. */
.atlas__mark {
  fill: var(--atlas-mark);
  opacity: 0.62;
  transition: opacity 0.24s ease;
}

.atlas__plate[aria-current="true"] .atlas__mark,
.atlas__plate[data-engaged] .atlas__mark {
  opacity: 1;
}

/* A mark is 2.4 units across and no pointer can hit that, so every pin carries
   an invisible disc that can. It is last in the group, over its own mark and
   under nothing, and it is the only part of a pin that takes the pointer. */
.atlas__hit {
  fill: transparent;
}

.atlas__pin {
  cursor: pointer;
}

.atlas__pin:focus {
  outline: none;
}

/* The keyboard has to see what the pointer sees. The ring is the focus
   indicator here, because a browser outline around a 2.4-unit circle inside a
   scaled SVG lands in the wrong place at half the widths this page has. */
.atlas__pin:focus-visible .atlas__halo,
.atlas__pin:hover .atlas__halo,
.atlas__halo[data-active] {
  opacity: 1;
  transform: scale(1);
}

.atlas__pin:focus-visible .atlas__mark,
.atlas__pin:hover .atlas__mark,
.atlas__mark[data-active] {
  opacity: 1;
}

/* When one dealer is engaged, the rest of the network steps back. Without this
   the ring has to compete with ten other marks at full strength, and in the
   Istanbul cluster it loses. */
.atlas[data-engaged] .atlas__mark {
  opacity: 0.28;
}

.atlas[data-engaged] .atlas__mark[data-active] {
  opacity: 1;
}

/* The evidence ring, drawn from the second glyph on the specimen sheet. It is
   the only thing that can single out one mark inside the Istanbul cluster, so
   it stays hidden until a record claims it. */
.atlas__halo {
  fill: none;
  stroke: var(--atlas-mark);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.atlas__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--atlas-line);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.24s ease;
}

.atlas__city {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-name);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}

.atlas__city:hover,
.atlas__city:focus-visible {
  color: var(--atlas-mark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The count is the atlas restated as a number, for the reader who takes a
   directory in figures rather than in shapes. */
.atlas__count {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--atlas-muted);
}

.atlas__plate[aria-current="true"] .atlas__count,
.atlas__plate[data-engaged] .atlas__count {
  color: var(--atlas-mark);
}

/* ---------- The screen ---------- */

/* The atlas's instrument display. It is a screen rather than a caption: it
   reports whatever is currently under the reader's attention. It reserves its
   own height so nothing under it moves when the text changes, which on a sticky
   panel would be a shudder every time the pointer crossed a name.

   It has two states and they are two blocks, not one set of slots rewritten.
   A dealer is a name, a district and a number to call. A province is a place
   and a count, and it has no district and no number - so writing it into the
   dealer's shape put a place in the dealer's accent colour and left the number
   line empty underneath it, which read as a dealer that had failed to load.
   The province states its count as a figure instead. */
.screen {
  display: grid;
  margin: 22px 0 0;
  padding: 13px 12px 15px;
  min-height: 96px;
  border: 1px solid var(--atlas-line);
  background: rgba(0, 0, 0, 0.22);
}

/* Both states occupy the same cell, so the taller one sets the height and
   neither can move what is under the panel when the screen changes state. */
.screen__region,
.screen__dealer {
  grid-area: 1 / 1;
  align-self: center;
}

.screen[data-mode="region"] .screen__dealer,
.screen[data-mode="dealer"] .screen__region {
  visibility: hidden;
}

/* The lines change together, so they arrive together: one short fade on the
   block rather than one per part. */
.screen__region,
.screen__dealer {
  transition: opacity 0.16s ease;
}

.screen[data-swapping] .screen__region,
.screen[data-swapping] .screen__dealer {
  opacity: 0;
}

.screen__place,
.screen__figure,
.screen__name,
.screen__where,
.screen__tel {
  margin: 0;
}

/* The province reads across the whole width, on the grammar the plate labels
   below the maps already use: a name on the left, its figure on the right, both
   sitting on one baseline. Stacked in the top-left corner instead, the two
   short lines left two thirds of the panel empty and the box looked like it was
   waiting for something. */
.screen__region {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* The province's name is a label rather than a headline: the plate above
   already carries it as a title, and the accent belongs to the thing a reader
   can act on. The plate puts the name large and the count small; the screen is
   an instrument and inverts that, because the quantity is what it is reporting. */
.screen__place {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--atlas-muted);
}

/* The count, set the way the telephone column is set: the figure large and in
   tabular numerals, its unit small and quiet beside it. */
.screen__figure {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.screen__count {
  font-family: var(--font-name);
  font-size: 34px;
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--atlas-ink);
}

.screen__unit {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--atlas-muted);
}

.screen__name {
  font-family: var(--font-name);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--atlas-mark);
}

.screen__where {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--atlas-muted);
}

.screen__tel {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--atlas-ink);
}

.atlas__plates > :first-child .atlas__city {
  font-size: 17px;
}

.atlas[data-open] .atlas__plates > :first-child .atlas__city {
  font-size: 14.5px;
}

/* ---------- The open province ---------- */

/* One province at four times its rail size, at the head of the record column.
   It pushes the list down rather than covering it: every one of the eleven
   records stays exactly where it was in the document, which was the condition
   attached to this whole mechanic. */
.expand {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(24px, 3vw, 40px);
  scroll-margin-top: calc(var(--header-height) + 14px);
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 26px) clamp(10px, 1.4vw, 18px);
  border: 1px solid var(--hair-strong);
  background: var(--paper);
}

/* The province names itself behind its own map rather than above it. The map is
   the subject; the name is the ground it stands on, so it is set at the size a
   ground is set at and in the paper's own ink at low opacity. It is decorative
   - the province is named in the rail, in the records below, and in the plate
   the reader pressed - so it is out of the accessibility tree and out of the
   way of the pointer. */
.expand__ghost {
  position: absolute;
  /* Bled off the foot of the panel rather than fitted inside it. A word this
     size that stops just short of the edge reads as a word that did not fit;
     one that runs off it reads as a ground. */
  inset: auto 0 -0.3em;
  z-index: 0;
  margin: 0;
  font-family: var(--font-name);
  font-size: clamp(76px, 15vw, 210px);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--ink);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}

/* The province, drawn on paper this time, so the whole open state reads as a
   sheet pulled out of the ledger rather than as a second dark panel. */
.expand__map {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

.expand .atlas__field {
  fill: url(#atlas-stipple);
  stroke: var(--line-strong);
}

.expand .atlas__stipple,
.expand__map .atlas__stipple {
  fill: var(--line);
}

.expand .atlas__mark {
  fill: var(--signal-orange);
  opacity: 0.75;
}

.expand .atlas__halo {
  stroke: var(--signal-orange);
}

.expand .atlas__leader-line {
  stroke: var(--line-strong);
}

.expand .atlas__leader-end {
  fill: var(--line-strong);
}

.expand .atlas__leader-name {
  fill: var(--ink);
}

.expand .atlas__leader:hover .atlas__leader-line,
.expand .atlas__leader:focus-visible .atlas__leader-line,
.expand .atlas__leader[data-active] .atlas__leader-line {
  stroke: var(--signal-orange);
}

.expand .atlas__leader:hover .atlas__leader-end,
.expand .atlas__leader:focus-visible .atlas__leader-end,
.expand .atlas__leader[data-active] .atlas__leader-end {
  fill: var(--signal-orange);
}

.expand .atlas__leader:hover .atlas__leader-name,
.expand .atlas__leader:focus-visible .atlas__leader-name,
.expand .atlas__leader[data-active] .atlas__leader-name {
  fill: var(--orange-ink);
}

/* ---------- A region ---------- */

/* The list has three rule weights, and that is the whole of its structure.

   It had one doing every job: the same hairline closed a record and closed a
   region, so eleven rows and five regions read as sixteen identical events. The
   rules now rank what they separate. A region opens on the heaviest rule the
   page has and on a large gap, so a region is a chapter. Its heading closes on
   a medium rule. A record closes on a hairline. Nothing else changed: no new
   column, no new field, no numbering. Operator selection, 2026-07-31. */
.region {
  scroll-margin-top: calc(var(--header-height) + 14px);
}

/* The break belongs to the join between two regions, not to a region.

   Stated the other way round - a rule on every region, taken off the first with
   `:first-child` - it silently applied to all five. The five province panels
   are the first children of this column, because that is how an opened province
   pushes the list down, so no region is ever a first child. Istanbul opened on a
   chapter rule with no chapter above it, which is also the one mark that showed
   before the entrance had drawn anything. `~` asks the question the design
   actually asks: is there a region above this one? */
.region ~ .region {
  margin-top: clamp(38px, 4.4vw, 62px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 2px solid var(--ink);
}

.region__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair-strong);
}

.region__city {
  margin: 0;
  font-family: var(--font-name);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  padding-bottom: 0.04em;
}

.region__count {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.region__dealers {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- A dealer record ---------- */

/* Two columns, not four. The address used to sit in a column of its own at the
   far right of the row, which set it as a fourth data field of equal rank and
   made every record four separate things to read. It is one thing: this is who
   they are and this is where they are. It now runs directly under the name it
   belongs to, quieter and narrower, and the row is a name block and a
   telephone.

   The website column is gone with it. A URL set as text is a string nobody
   reads; the dealer's own name is the link now. */
.dealer {
  position: relative;
  /* A record is an anchor target - the atlas links straight to it - and the
     header is fixed, so without this the row a reader followed lands under the
     navigation. */
  scroll-margin-top: calc(var(--header-height) + 20px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 34px);
  align-items: center;
  padding: clamp(15px, 1.7vw, 21px) 0;
  border-bottom: 1px solid var(--hair);
  transition:
    background-color 0.24s ease,
    box-shadow 0.24s ease,
    opacity 0.24s ease;
}

/* The last record in a region does not close on a hairline. The region below it
   already opens on the heaviest rule the page has, and the two together drew a
   double line with dead paper between them - loudest where a one-dealer region
   ends, which is four of the five. */
.dealer:last-child {
  border-bottom: 0;
}

/* When the atlas points at a record, the record answers. It is a wash of the
   accent rather than a border or a shift, because a directory row that moves
   when something else is hovered is a directory row that has lost its place in
   a list. */
.dealer[data-engaged] {
  background: linear-gradient(
    90deg,
    var(--orange-soft) 0%,
    var(--orange-soft) 82%,
    transparent 100%
  );
}

/* ---------- Arrival ---------- */

/* Following a name on the map lands the reader here, and the row has to be
   findable the instant it stops moving. Pointing at a record is a hint; landing
   on one is an answer, so arrival is louder than engagement in two ways at once
   - a full ground and the telephone in a different colour - and it holds for a
   few seconds and then lets go.

   The ground is painted past the row's own box by an offset shadow, so nothing
   shifts by a pixel when it arrives or leaves. A row that jumps when it is
   selected is the opposite of findable. */
.dealer[data-arrived] {
  background: var(--orange-soft);
  box-shadow:
    -14px 0 0 var(--orange-soft),
    14px 0 0 var(--orange-soft);
}

/* And the rest of the list steps back, because the row has to be louder than
   its neighbours and not only louder than itself a moment ago. */
.records[data-arrived] .dealer:not([data-arrived]) {
  opacity: 0.42;
}

.dealer__id {
  grid-column: 1;
  min-width: 0;
}

.dealer__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-family: var(--font-name);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* The name is the link to the dealer's own site. Two of eleven have no site
   and are set as plain text at the same size and weight, so a record without a
   website is a complete record rather than a broken one. */
.dealer__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--orange-line);
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}

.dealer__name a svg {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition: opacity 0.18s ease;
}

.dealer__name a:hover,
.dealer__name a:focus-visible {
  color: var(--orange-ink);
  border-bottom-color: currentColor;
}

.dealer__name a:hover svg,
.dealer__name a:focus-visible svg {
  opacity: 1;
}

/* The same evidence point the atlas uses, at the head of the record it belongs
   to. It is what makes the map and the ledger read as one object rather than
   two things on one page. */
.dealer__pip {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-orange);
  transform: translateY(-0.32em);
  transition: box-shadow 0.2s ease;
}

.dealer:hover .dealer__pip,
.dealer:focus-within .dealer__pip,
.dealer[data-engaged] .dealer__pip {
  box-shadow: 0 0 0 3px var(--orange-line);
}

/* The address, set as the subordinate line it is. Indented to the name's own
   text edge, so the pip column stays a column all the way down the page. */
/* The address is the only running text in the record, and it is set at 13px in
   a muted ink. At 1.5 it set as tight as the interface labels around it, which
   is what made a two-line address read as one dense block. It is opened up so
   it reads as prose under a name rather than as a data field.

   The measure stays at 62ch. Narrowing it was tried and reverted: it wrapped
   the addresses earlier and left `/ Istanbul` alone on a second line. */
.dealer__adr {
  margin: 6px 0 0 17px;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.68;
  color: var(--muted);
}

/* ---------- The telephone ---------- */

/* A directory is opened in order to call somebody, so the number is the second
   of the two things a record says and it is set like a number rather than like
   a sentence.

   Three things do the work. The area code is demoted: it is the part a reader
   already knows or does not care about, so it sits small and muted ahead of
   the subscriber number. The number itself is set in tabular figures, which is
   the whole point - every digit is the same width, so the eleven numbers form
   a true column down the page and a reader can compare or copy one without
   hunting for where it starts. And the lane keeps its outline, so the target
   is a target before it is read. */
.dealer__tel {
  grid-column: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--signal-orange);
  color: var(--orange-ink);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.dealer__tel-code {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
  align-self: center;
}

.dealer__tel-num {
  font-family: var(--font-ui);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 600;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  align-self: center;
}

.dealer__tel svg {
  flex: none;
  align-self: center;
  width: 17px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
  transition:
    transform 0.22s ease,
    opacity 0.2s ease;
}

.dealer__tel:hover,
.dealer__tel:focus-visible {
  background: var(--signal-orange);
  color: var(--ink);
}

.dealer__tel:hover svg,
.dealer__tel:focus-visible svg {
  opacity: 1;
  transform: translateX(4px);
}

/* The arrived record's telephone is filled, and filled in the deep accent
   rather than the surface one, so it is not the same colour as a row somebody
   happens to be hovering. It is the third signal on the row and the one the
   reader came for. */
.dealer[data-arrived] .dealer__tel {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--paper-bright);
}

.dealer[data-arrived] .dealer__tel svg {
  opacity: 1;
}

/* ---------- The closing request ---------- */

.handover {
  border-top: 1px solid var(--hair-strong);
  padding: clamp(40px, 5vw, 76px) 0 clamp(46px, 6vw, 86px);
}

.handover__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 34px);
}

.handover__note {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.handover__action {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(15px, 1.8vw, 21px) clamp(20px, 2.6vw, 32px);
  background: var(--signal-orange);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.handover__action svg {
  flex: none;
  width: clamp(24px, 2.2vw, 32px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.24s ease;
}

.handover__action:hover,
.handover__action:focus-visible {
  background: var(--orange-deep);
}

.handover__action:hover svg,
.handover__action:focus-visible svg {
  transform: translateX(8px);
}

/* The boundary credit, at the foot of the page rather than under the map.
   geoBoundaries is CC BY-SA 2.0 and derived from OpenStreetMap, so the page
   names it; set beside the figure it read as that figure's caption, and it is
   a statement about the page. Operator instruction, 2026-07-31. */
.handover__credit {
  margin: clamp(30px, 4vw, 52px) clamp(22px, 3.4vw, 64px) 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--hair);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------- Compact ---------- */

/* Below this the four record columns stop being four readable columns, and the
   rail stops being a rail. */
@media (max-width: 1080px) {
  .ledger {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 38px);
  }

  .records {
    padding: 0 clamp(20px, 4vw, 40px);
  }

  /* The atlas becomes a band above the records: the lead plate keeps its size
     and the four single-dealer provinces sit beside it in one row, so the
     seven-versus-one proportion survives the change of axis. */
  .atlas__inner {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    grid-template-areas:
      "grid grid"
      "screen screen";
    gap: clamp(16px, 2.6vw, 28px) clamp(18px, 3vw, 36px);
    align-items: start;
  }

  .atlas__plates {
    grid-area: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .atlas__plates > :first-child {
    grid-column: 1 / -1;
  }

  .screen {
    grid-area: screen;
    margin-top: 0;
  }
}

@media (max-width: 900px) {
  /* The record stacks: the name block, then the telephone at full width. Two
     columns at 390px would put a nine-digit number against a two-line address
     and neither would fit. */
  .dealer {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  .dealer__id,
  .dealer__tel {
    grid-column: 1;
  }

  .dealer__tel {
    justify-content: flex-start;
    min-height: 56px;
  }

  .dealer__tel-num {
    font-size: 21px;
  }

  .dealer__adr {
    max-width: none;
  }

  /* At this width the wash would run off the reading edge, so it fills. */
  .dealer[data-engaged] {
    background: var(--orange-soft);
  }

  .dealer[data-arrived] {
    box-shadow:
      -8px 0 0 var(--orange-soft),
      8px 0 0 var(--orange-soft);
  }


}

@media (max-width: 700px) {
  .atlas__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "grid"
      "screen";
  }

  .atlas__plates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .handover__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .handover__action {
    justify-content: space-between;
  }
}