/* Carlos Ivan Diaz Murphy — an index of accounts.
   Editorial brutalism: newspaper grid, hard rules, wide spacing, no ornament.
   Strictly monochrome. The only greys in the file are the ink at reduced
   opacity, never a separate hue — "just black and white" taken literally. */

:root {
  --paper: #FFFFFF;
  --ink: #0B0B0B;
  /* Secondary text is the ink, thinned. Not a grey swatch: the same black,
     so a print-out and a screen agree and nothing warms up. */
  --ink-2: rgba(11, 11, 11, .58);
  --ink-3: rgba(11, 11, 11, .28);
  --hair: rgba(11, 11, 11, .22);

  /* The IKONIKO system, in the owner's own shorthand:
       Saira          = structure     — the wordmark, headlines, interface
       Fraunces       = reading       — body copy, deks and standfirsts
       IBM Plex Mono  = information   — dates, labels, figures, metadata
     Every rule below picks one of these three on that basis and no other. */
  /* The IBM Plex siblings sit after Saira and Fraunces purely to carry
     Cyrillic, which neither of those faces has. Font resolution is per
     character: a Latin letter finds Saira and stops; a Cyrillic letter falls
     through to IBM Plex Sans. So the Russian page stays inside the same family
     universe instead of dropping to a system font, and a Latin reader never
     downloads a byte of it. */
  --structure: "Saira", "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --reading: "Fraunces", "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --information: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The newspaper measure. Wide, but not so wide a row becomes a journey. */
  --page: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* The page inverts for a reader who asks for dark. Still only black and
   white — the ink and the paper simply change places. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B0B0B;
    --ink: #FFFFFF;
    --ink-2: rgba(255, 255, 255, .62);
    --ink-3: rgba(255, 255, 255, .32);
    --hair: rgba(255, 255, 255, .26);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--gutter) clamp(48px, 8vw, 96px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--reading);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--structure);
  font-weight: 500;
  font-size: .9rem;
  z-index: 10;
}
.skip:focus { left: var(--gutter); }

/* ── Rules ──────────────────────────────────────────────────────────────────
   The horizontal rule is the whole decorative vocabulary of this page. Two
   weights only: a hairline that separates like things, and a heavy bar that
   separates unlike things. Nothing else draws. */
.rule { max-width: var(--page); margin-inline: auto; background: var(--ink); }
.rule-hair { height: 1px; opacity: .28; }
.rule-heavy { height: 6px; }

/* ── Masthead ───────────────────────────────────────────────────────────── */
.masthead { max-width: var(--page); margin: 0 auto; }

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 clamp(38px, 7vw, 76px);
}

.mark { display: block; width: 26px; height: 26px; color: var(--ink); }
.mark svg { display: block; width: 100%; height: 100%; }

.dateline {
  margin: 0;
  font-family: var(--information);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

h1 {
  margin: 0 0 clamp(30px, 6vw, 62px);
  font-family: var(--structure);
  font-weight: 700;
  /* The wordmark. Saira is narrower than a standard grotesque, so it carries
     more size than a wider black would at the same apparent weight. */
  font-size: clamp(2.7rem, 11.5vw, 7.2rem);
  line-height: .95;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
}

.standfirst {
  max-width: 62ch;
  margin: 20px auto 0;
  margin-inline: 0;
  font-family: var(--reading);
  font-variation-settings: "opsz" 24;
  font-size: clamp(1.02rem, 2.2vw, 1.24rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── The list ───────────────────────────────────────────────────────────────
   The index is one flat ranked run, not a set of groups. The owner gave an
   explicit order, and that order crosses every grouping a medium-based
   sectioning would impose — LSE sits fourth, between LinkedIn and the
   photography account — so a section label would fight the hierarchy rather
   than help it. The index numbers carry position instead.

   `.set` and `.set-label` survive because 404.html still uses them. */
main { max-width: var(--page); margin: 0 auto; }

main > .rows { margin-top: clamp(46px, 8vw, 86px); }

.set { margin-top: clamp(46px, 8vw, 86px); }

/* A heading the list needs for structure but the design does not want to show. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.set-label {
  margin: 0 0 4px;
  font-family: var(--information);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.rows li { border-bottom: 1px solid var(--hair); }

/* ── A row ──────────────────────────────────────────────────────────────────
   Three columns on a wide screen: index number, name, and what it is. The
   number column is fixed so the names align into a true column, which is the
   whole point of an index; the metadata holds the right edge.

   There was a fourth column with a ↗ in it. iOS gives U+2197 emoji
   presentation, so on a phone it rendered in colour on a page whose whole
   argument is that it has two. Removed rather than redrawn — fifteen repeated
   glyphs were decoration on a page that says it has none, and a row inverting
   to solid black already says it is a link. */
.row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: baseline;
  gap: 0 24px;
  padding: 21px 0;
  color: inherit;
  text-decoration: none;
  /* Hover and focus fill the row solid. Declared here so the fill grows from
     the edges of the text block rather than snapping. */
  transition: background-color .14s linear, color .14s linear, padding-inline .14s linear;
}

.n {
  font-family: var(--information);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.name {
  font-family: var(--structure);
  font-size: clamp(1.22rem, 3vw, 1.62rem);
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.15;
}

.meta {
  font-family: var(--information);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-align: right;
}

/* The inversion. A row under the cursor or the keyboard becomes a solid black
   bar with white type — the strongest possible signal available inside a
   two-colour palette, and no colour is borrowed to get it. */
.row:hover,
.row:focus-visible {
  background: var(--ink);
  color: var(--paper);
  padding-inline: 18px;
  outline: none;
}
.row:hover .n, .row:focus-visible .n,
.row:hover .meta, .row:focus-visible .meta { color: var(--paper); }

/* Keyboard users get the inversion AND a visible ring, because the inversion
   alone can be ambiguous when the pointer is also somewhere on the page. */
.row:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--paper); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer { max-width: var(--page); margin: clamp(58px, 10vw, 110px) auto 0; }

.colophon {
  margin: 18px 0 0;
  font-family: var(--information);
  /* 12px is the floor for live text on this site. At .68rem this line was
     10.9px, and uppercase plus letterspacing made it the widest thing on the
     page at 320px. */
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* ── Language ───────────────────────────────────────────────────────────────
   Built by script, never by markup: without JavaScript there is no way to read
   the phone's language, so a switcher rendered in HTML would be a control that
   does nothing. It exists only when it can work. Set in the information voice,
   because a language code is information. */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 26px;
}
.langs button {
  appearance: none;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--information);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .12em;
  cursor: pointer;
  transition: color .14s linear, background-color .14s linear;
}
.langs button:first-child { padding-left: 0; }
.langs button:hover { color: var(--ink); }
.langs button[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  padding-inline: 12px;
}
.langs button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  color: var(--ink);
}
.langs button[aria-current="true"]:focus-visible { color: var(--paper); }

@media (prefers-reduced-motion: reduce) { .langs button { transition: none; } }

/* ── Narrow ─────────────────────────────────────────────────────────────────
   Below 720px the row folds: the number stays in its column, and the name and
   its description stack. The arrow holds the right edge so the row still reads
   as a departure rather than a paragraph. */
@media (max-width: 720px) {
  .row {
    grid-template-columns: 3rem 1fr;
    align-items: start;
    gap: 2px 16px;
    padding: 19px 0;
  }
  /* Every child placed explicitly. Two of them span both rows, and leaving the
     other two to auto-placement put the name in column three at 26px wide and
     dropped the arrow on top of the handle. Auto-placement and row-spanning
     items do not mix; name the cell. */
  .n    { grid-column: 1; grid-row: 1 / span 2; }
  .name { grid-column: 2; grid-row: 1; }
  .meta { grid-column: 2; grid-row: 2; text-align: left; }
  .row:hover, .row:focus-visible { padding-inline: 12px; }
}

/* A coarse pointer has no hover, so the fill would stick after a tap. Keep the
   press state only for the moment of the press. */
@media (hover: none) {
  .row:hover { background: none; color: inherit; padding-inline: 0; }
  .row:hover .n { color: var(--ink-3); }
  .row:hover .meta { color: var(--ink-2); }
  .row:active { background: var(--ink); color: var(--paper); }
  .row:active .n, .row:active .meta { color: var(--paper); }
}

@media (prefers-reduced-motion: reduce) {
  .row { transition: none; }
}

/* ── Print ──────────────────────────────────────────────────────────────────
   It is a list of addresses, so someone will print it. Show them. */
@media print {
  :root { --paper: #FFFFFF; --ink: #000000; --ink-2: #333; --ink-3: #555; --hair: #bbb; }
  h1 { font-size: 30pt; }
  body { padding: 0; font-size: 11pt; }
  .skip { display: none; }
  .row { padding: 8px 0; }
  .row::after {
    content: " " attr(href);
    grid-column: 1 / -1;
    font-family: var(--information);
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
  .rule-heavy { height: 3px; }
}