/* Blog — index and article.

   Mobile first throughout: every rule is the phone rule, and the media
   queries only ever add. Most of the traffic these articles are written to
   catch arrives on a phone from a search result, reads a third of the way
   down, and decides there whether the studio is worth a call. */

/* ---------------------------------------------------------------------------
   Index
   --------------------------------------------------------------------------- */

.b-filter {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s8); padding-bottom: var(--s8);
  border-bottom: 1px solid var(--border);
}
.b-filter a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-500);
  border: 1px solid var(--border); padding: 7px var(--s3);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.b-filter a:hover { color: var(--ink-900); border-color: var(--ink-900); }
.b-filter a[aria-current="true"] {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--bone-50);
}

.b-list { display: grid; gap: 1px; background: var(--border);
          border: 1px solid var(--border); border-top: none; }
.b-item { background: var(--page); padding: var(--s6); display: block; }
.b-item:hover { background: var(--bone-100); }
.b-item__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--brass-700); }
.b-item h2, .b-item h3 {
  font-size: clamp(20px, 4.4vw, 26px); line-height: 1.15; letter-spacing: -.03em;
  margin-top: var(--s3); color: var(--ink-900); max-width: 26ch;
}
.b-item p { font-size: var(--small); margin-top: var(--s3); max-width: 60ch; }
.b-item__meta { display: block; margin-top: var(--s4); font-family: var(--font-mono);
                font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                color: var(--ink-400); }
@media (min-width: 700px) { .b-list { grid-template-columns: repeat(2, 1fr); }
                            .b-item { padding: var(--s8) var(--s6); } }
@media (min-width: 1100px) { .b-list { grid-template-columns: repeat(3, 1fr); } }

/* The lead article, given the full width above the grid. */
.b-lead { display: block; background: var(--ink-900); border-bottom: var(--field-edge) solid var(--brass-500); }
.b-lead__art { display: block; width: 100%; height: auto; }
.b-lead__text { padding: var(--s6); }
.b-lead__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--brass-300); }
.b-lead h2 { color: var(--bone-50); font-size: clamp(26px, 6vw, 46px); line-height: 1.05;
             letter-spacing: -.04em; margin-top: var(--s3); max-width: 20ch; }
.b-lead p { color: #CFCEC5; margin-top: var(--s4); max-width: 58ch; font-size: var(--small); }
@media (min-width: 900px) {
  .b-lead { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .b-lead__text { padding: var(--s12); }
}

/* ---------------------------------------------------------------------------
   Article
   --------------------------------------------------------------------------- */

/* One composed banner, not a text block with a stripe under it.
   The artwork is the ground; the headline sits on it. A scrim keeps the type
   at full contrast wherever the artwork happens to be brightest, so the
   composition can be reasonably confident without costing legibility. */
.a-head { position: relative; isolation: isolate; overflow: hidden;
          background: var(--ink-900);
          border-bottom: var(--field-edge) solid var(--brass-500); }
.a-head__art { position: absolute; inset: 0; z-index: 0;
               width: 100%; height: 100%; opacity: .62; }
.a-head::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, var(--ink-900) 0%, rgba(14,15,14,.94) 34%, rgba(14,15,14,.45) 72%, rgba(14,15,14,.30) 100%),
    linear-gradient(to top, rgba(14,15,14,.80) 0%, rgba(14,15,14,0) 46%);
}
.a-head__inner { position: relative; z-index: 2;
                 padding-block: var(--s16) var(--s12); }
@media (min-width: 900px) {
  .a-head__inner { padding-block: var(--s24) var(--s16); min-height: 32vw; }
  .a-head__art { opacity: .7; }
}
.a-head__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
               text-transform: uppercase; color: var(--brass-300); }
.a-head h1 { color: var(--bone-50); margin-top: var(--s5);
             font-size: clamp(30px, 7.4vw, 62px); line-height: 1.03; letter-spacing: -.04em;
             max-width: 18ch; }
.a-head__dek { color: #CFCEC5; margin-top: var(--s6); max-width: 54ch;
               font-size: clamp(16px, 4vw, 20px); line-height: 1.5; }
.a-head__meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s8);
                font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
                text-transform: uppercase; color: rgba(251,250,247,.62); }


/* The column. 66ch is the readable measure; the phone gets whatever fits. */
.a-body { padding-block: var(--s12) var(--s16); }
.a-body > * { max-width: 66ch; }
.a-body > p { margin-top: var(--s6); font-size: clamp(16px, 4.2vw, 18px); line-height: 1.65; }
.a-body > p:first-child { margin-top: 0; }
.a-body h2 {
  margin-top: var(--s16); font-size: clamp(23px, 5.4vw, 34px); line-height: 1.1;
  letter-spacing: -.035em; max-width: 22ch;
}
.a-body h3 { margin-top: var(--s10); font-size: clamp(18px, 4.4vw, 21px);
             letter-spacing: -.02em; max-width: 30ch; }
.a-body ul, .a-body ol { margin-top: var(--s5); padding-left: 0; list-style: none; }
.a-body li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6);
             border-top: 1px solid var(--border); font-size: clamp(15px, 4vw, 17px); line-height: 1.55; }
.a-body li:last-child { border-bottom: 1px solid var(--border); }
.a-body li::before { content: ""; position: absolute; left: 0; top: 1.15em;
                     width: 14px; height: 1px; background: var(--brass-500); }
.a-body strong { font-weight: 600; color: var(--ink-900); }
.a-body a:not(.btn) { color: var(--ink-900); text-decoration: underline;
                      text-underline-offset: 3px; text-decoration-color: var(--brass-500); }

/* The summary at the top.
   For a reader in a hurry, and for an answer engine deciding what this page
   says. Both want the same thing: the claims, stated plainly, near the top,
   without having to infer them from eleven paragraphs. */
.a-key { max-width: none; background: var(--ink-900); padding: var(--s6);
         border-bottom: var(--field-edge) solid var(--brass-500); }
.a-key > b { display: block; font-family: var(--font-mono); font-size: 11px;
             letter-spacing: .16em; text-transform: uppercase; color: var(--brass-300); }
.a-key ul { margin-top: var(--s4); padding-left: 0; list-style: none; }
.a-key li { position: relative; padding: var(--s3) 0 var(--s3) var(--s6);
            border-top: 1px solid rgba(251,250,247,.14); color: #CFCEC5;
            font-size: clamp(15px, 3.9vw, 16.5px); line-height: 1.5; }
.a-key li:first-child { border-top: none; }
.a-key li::before { content: ""; position: absolute; left: 0; top: 1.1em;
                    width: 14px; height: 1px; background: var(--brass-500); }
.a-key strong { color: var(--bone-50); font-weight: 600; }
@media (min-width: 700px) { .a-key { padding: var(--s8); } }

/* Questions, answered. Open by default is deliberate — a collapsed answer is
   an answer a crawler may not weight and a reader will not expand. */
.a-faq { max-width: none; margin-top: var(--s6);
         border-top: 1px solid var(--ink-900); }
.a-faq details { border-bottom: 1px solid var(--border); }
.a-faq summary { list-style: none; cursor: pointer; padding: var(--s5) var(--s8) var(--s5) 0;
                 position: relative; font-size: clamp(16px, 4.2vw, 18px); font-weight: 600;
                 color: var(--ink-900); letter-spacing: -.015em; }
.a-faq summary::-webkit-details-marker { display: none; }
.a-faq summary::after { content: ""; position: absolute; right: 4px; top: 50%;
                        width: 11px; height: 11px; margin-top: -7px;
                        border-right: 2px solid var(--brass-700);
                        border-bottom: 2px solid var(--brass-700);
                        transform: rotate(45deg); transition: transform .2s var(--ease); }
.a-faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.a-faq details > div { padding-bottom: var(--s6); }
.a-faq details > div p { font-size: clamp(15px, 4vw, 17px); line-height: 1.6;
                         max-width: 62ch; color: var(--ink-700); }

/* A number worth stopping on. */
.a-stat { max-width: none; margin-top: var(--s12); padding: var(--s8) 0;
          border-top: 1px solid var(--ink-900); border-bottom: 1px solid var(--border); }
.a-stat b { display: block; font-size: clamp(46px, 13vw, 96px); line-height: .88;
            letter-spacing: -.055em; font-weight: 700; color: var(--ink-900);
            font-variant-numeric: tabular-nums; }
.a-stat span { display: block; margin-top: var(--s4); max-width: 42ch;
               font-size: var(--small); color: var(--ink-500); }

/* Pulled out of the flow, said plainly. */
.a-pull { max-width: none; margin-top: var(--s12); padding: var(--s8) 0 var(--s8) var(--s6);
          border-left: var(--field-edge) solid var(--brass-500); }
.a-pull p { font-size: clamp(20px, 5.2vw, 30px); line-height: 1.22; letter-spacing: -.03em;
            font-weight: 600; color: var(--ink-900); max-width: 24ch; }

/* An aside that is genuinely an aside. */
.a-note { max-width: none; margin-top: var(--s10); background: var(--bone-100);
          border-left: var(--field-edge) solid var(--ink-900); padding: var(--s6); }
.a-note b { display: block; font-family: var(--font-mono); font-size: 11px;
            letter-spacing: .16em; text-transform: uppercase; color: var(--brass-700); }
.a-note p { margin-top: var(--s3); font-size: var(--small); max-width: 58ch; }

/* Inline artwork inside the body. */
.a-fig { max-width: none; margin-top: var(--s12); }
.a-fig svg { display: block; width: 100%; height: auto; }
.a-fig figcaption { margin-top: var(--s4); font-family: var(--font-mono); font-size: 11px;
                    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-400); }

/* Two-column facts. */
.a-two { max-width: none; display: grid; gap: 1px; background: var(--border);
         border: 1px solid var(--border); margin-top: var(--s10); }
.a-two div { background: var(--page); padding: var(--s6); }
.a-two b { display: block; font-size: 16px; color: var(--ink-900); }
.a-two p { margin-top: var(--s2); font-size: 14px; }
@media (min-width: 700px) { .a-two { grid-template-columns: repeat(2, 1fr); } }

/* Foot of the article. */
.a-cta { background: var(--ink-800); border-top: var(--field-edge) solid var(--brass-500);
         border-bottom: var(--field-edge) solid var(--brass-500); }
.a-more { padding-block: var(--s16); }
.a-more h2 { font-size: clamp(21px, 5vw, 28px); letter-spacing: -.03em; }


/* ---------------------------------------------------------------------------
   Figures — HTML, not SVG.

   The first version drew these as SVG on a 1000px canvas with 17-19px labels,
   which rendered at about 6px in a phone column. Text in a scaled SVG scales
   with the picture; text in HTML does not. It also stays selectable, respects
   the reader's own font size, and can be read by a screen reader or lifted by
   an answer engine — none of which is true of a picture of a number.
   --------------------------------------------------------------------------- */

.fbar { display: grid; gap: 2px; }
.fbar__r { display: grid; grid-template-columns: 1fr; gap: 4px;
           padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.fbar__r:first-child { border-top: 1px solid var(--ink-900); }
.fbar__l { font-size: 15px; font-weight: 500; color: var(--ink-900); }
.fbar__t { display: block; height: 12px; background: var(--bone-200); border-radius: 2px; overflow: hidden; }
.fbar__f { display: block; height: 100%; background: var(--ink-700); border-radius: 2px; }
.fbar__r--hot .fbar__f { background: var(--brass-500); }
.fbar__v { font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); }
@media (min-width: 640px) {
  .fbar__r { grid-template-columns: minmax(0,7rem) 1fr minmax(0,11rem);
             align-items: center; gap: var(--s5); }
  .fbar__t { height: 16px; }
  .fbar__v { text-align: right; }
}

.ftl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ftl__s { position: relative; padding: var(--s4) 0 var(--s4) var(--s8);
          border-bottom: 1px solid var(--border); }
.ftl__s:first-child { border-top: 1px solid var(--ink-900); }
.ftl__s::before { content: ""; position: absolute; left: 0; top: 1.55em;
                  width: 11px; height: 11px; border-radius: 50%;
                  background: var(--ink-900); }
.ftl__s--last::before { background: var(--brass-500); box-shadow: 0 0 0 4px rgba(192,138,62,.22); }
.ftl__w { display: block; font-family: var(--font-mono); font-size: 13px;
          letter-spacing: .1em; text-transform: uppercase; color: var(--brass-700); }
.ftl__x { display: block; font-size: 16px; color: var(--ink-900); margin-top: 2px; }
@media (min-width: 640px) {
  .ftl { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .ftl__s { padding: var(--s8) var(--s4) var(--s4) 0; border-bottom: none;
            border-top: 1px solid var(--border); }
  .ftl__s:first-child { border-top-color: var(--ink-900); }
  .ftl__s::before { top: -6px; left: 0; }
}

/* The lead card on the index uses the same band. */
.b-lead__art, .b-lead svg { display: block; width: 100%; height: clamp(140px, 22vh, 260px); }