/* Editorial look: a magazine spread. White paper, ink, hairlines, Archivo 900,
   mono caps labels, square black-and-white tile, slab buttons (label left, arrow right).
   Tokens live in theme.css :root (Editorial is the default). This file holds only the
   shapes a token cannot express, under html[data-look="editorial"]. */

/* slab buttons: label left, arrow right */
html[data-look="editorial"] .btn { justify-content: space-between; text-align: left; padding: 0 18px 0 20px; }
html[data-look="editorial"] .btn::after {
  content: '\2192'; /* → */
  font-family: var(--font-mono); font-weight: 400; font-size: 18px; line-height: 1;
  transition: transform .15s;
}
html[data-look="editorial"] .btn:hover { background: var(--paper); color: var(--ink); }
html[data-look="editorial"] .btn:hover::after { transform: translateX(4px); }
html[data-look="editorial"] .btn--ghost:hover { background: var(--ink); color: var(--paper); }
html[data-look="editorial"] .btn-row .btn { width: 100%; }
@media (min-width: 560px) {
  html[data-look="editorial"] .btn-row .btn { width: auto; min-width: min(100%, var(--btn-w)); }
}
html[data-look="editorial"] .mast .btn { min-width: 0; }

/* masthead: name set like a nameplate */
html[data-look="editorial"] .mast__name { text-transform: uppercase; font-weight: 900; font-size: 18px; letter-spacing: -.01em; }

/* hero: the text column opens under a full-weight rule, like a spread's column head */
html[data-look="editorial"] .hero__text { border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-2); }
html[data-look="editorial"] .hero__text .kick { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-2); }
html[data-look="editorial"] .hero__tile .caption { padding-top: 10px; border-top: var(--rule-w) solid var(--rule); }
/* the caption sits directly under the tile, so the figure reads as one unit at every width */
html[data-look="editorial"] .hero__proof { border-top: 0; padding-top: 0; padding-left: var(--space-2); border-left: 3px solid var(--ink); }

/* measure row: hairline grid, values marked like a highlighter.
   nth-child counts the hidden usage cells too; with or without them, even children sit in the right column on phones. */
html[data-look="editorial"] .measure__grid { border-top: var(--rule-w) solid var(--rule); }
html[data-look="editorial"] .measure__item b { margin-left: 0; } /* the mark stays inside its column */
html[data-look="editorial"] .measure__item { padding: var(--space-3) var(--space-2) var(--space-3) 0; border-bottom: var(--rule-w) solid var(--rule-soft); }
html[data-look="editorial"] .measure__item:nth-child(even) { padding: var(--space-3) 0 var(--space-3) var(--space-2); border-left: var(--rule-w) solid var(--rule-soft); }
@media (min-width: 768px) {
  html[data-look="editorial"] .measure__item,
  html[data-look="editorial"] .measure__item:nth-child(even) { padding: var(--space-3) var(--space-3) var(--space-1); border-bottom: 0; border-left: var(--rule-w) solid var(--rule-soft); }
  html[data-look="editorial"] .measure__item:first-child { border-left: 0; padding-left: 0; }
  html[data-look="editorial"] .measure[data-usage-ok="true"] .measure__item:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  html[data-look="editorial"] .measure[data-usage-ok="true"] .measure__item:nth-child(n+4) { border-top: var(--rule-w) solid var(--rule-soft); }
}

/* cards: hairline box, no shadow */
html[data-look="editorial"] .card { border-color: var(--rule); }

/* footer: mono caps throughout */
html[data-look="editorial"] .foot__links a { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }