/* lancekeay.com page CSS: the reading layer the kit lacks (article text, data tables, post tiles, the tag
   filter) and the free-flowing sections of the inner pages. Tokens only from system.css and the :root block. */

/* ---------- inner pages: sections flow with their content (long reading, wide tables) ---------- */
main > section.flow, main > section.flow-hero { height: auto; min-height: 0; }
main > section.flow > .wrap, main > section.flow-hero > .wrap { height: auto; }
main > section.flow-hero { padding-top: calc(var(--nav) + var(--s-8)); padding-bottom: var(--s-8); }
main > section.flow { padding-top: var(--s-8); padding-bottom: var(--s-9); }
main > section.flow + section.flow { padding-top: 0; }
main > section.flow.ground-surface { padding-top: var(--s-8); }
main > section.flow.ground-surface + section.flow { padding-top: var(--s-8); }
@media (max-width: 639px) {
  main > section.flow, main > section.flow-hero { min-height: 0; display: block; }
  main > section.flow-hero { padding-top: calc(var(--nav) + var(--s-6)); padding-bottom: var(--s-6); }
  main > section.flow { padding-top: var(--s-6); padding-bottom: var(--s-8); }
  main > section.flow + section.flow { padding-top: 0; }
  main > section.flow.ground-surface, main > section.flow.ground-surface + section.flow { padding-top: var(--s-7); }
}
@media (min-width: 640px) and (max-width: 1279px) {
  main > section.flow, main > section.flow-hero { min-height: 0; display: block; }
}
footer.closing.flow-foot { height: auto; min-height: 0; }
footer.closing.flow-foot > .wrap { height: auto; }

/* ---------- small type helpers ---------- */
.meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--muted); font-size: var(--t-small); }
.tag { font-size: var(--t-label); font-weight: 500; color: var(--action); }
.lede { font-size: var(--t-lead); line-height: 1.55; max-width: 60ch; }

/* ---------- post tiles (home and the posts list) ---------- */
.post-tile { display: grid; gap: var(--s-3); align-content: start; color: inherit; text-decoration: none; }
.post-tile .tile__media { aspect-ratio: 4 / 3; }
.post-tile h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.post-tile .verdict-line { color: var(--ink); font-size: var(--t-body); line-height: 1.5; }
.post-tile .verdict-line b { font-weight: 500; }

/* ---------- the posts list: rows that read across ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-7); }
.filters button {
  min-height: 44px; padding: 0 var(--s-5); border-radius: 999px; border: 1px solid var(--line-strong, var(--line));
  background: transparent; color: var(--ink); font: 500 15px/1 var(--font-text); cursor: pointer;
}
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.post-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px; gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); align-items: start; }
.post-row[hidden] { display: none; }
.post-row__media { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease, ease); }
.post-row__media:hover img { transform: scale(1.03); }
.post-row h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 28px; line-height: 1.2; letter-spacing: var(--display-tracking); margin: var(--s-2) 0 var(--s-3); }
.post-row h2 a { color: inherit; text-decoration: none; }
.post-row h2 a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-row p { max-width: 62ch; }
.post-row__verdict { border-left: 2px solid var(--action); padding-left: var(--s-4); }
.post-row__verdict .t-label { color: var(--muted); display: block; margin-bottom: var(--s-1); }
@media (max-width: 1023px) {
  .post-row { grid-template-columns: 160px minmax(0, 1fr); }
  .post-row__verdict { grid-column: 2; }
}
@media (max-width: 639px) {
  .post-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .post-row__verdict { grid-column: 1; }
  .post-row h2 { font-size: 24px; }
}

/* ---------- a post's head: the verdict at a glance ---------- */
.post-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.post-head__text { grid-column: 1 / span 7; }
.post-head__media { grid-column: 9 / span 4; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.post-head__media img { width: 100%; height: 100%; object-fit: cover; }
.post-head h1 { font-size: clamp(36px, 2.6vw + 20px, 60px); line-height: 1.06; margin: var(--s-4) 0 var(--s-5); }
.glance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--s-7) 0 0; border-top: 1px solid var(--line); }
.glance > div { padding: var(--s-4) var(--s-5) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.glance dt { font-size: var(--t-label); font-weight: 500; color: var(--muted); margin-bottom: var(--s-1); }
.glance dd { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.glance .glance__verdict { grid-column: 1 / -1; }
.glance .glance__verdict dd { font-family: var(--font-display); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
.sample-note { margin-top: var(--s-5); font-size: var(--t-small); color: var(--muted); max-width: 62ch; }
@media (max-width: 1023px) {
  .post-head__text { grid-column: 1 / -1; }
  .post-head__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) {
  .post-head { grid-template-columns: minmax(0, 1fr); }
  .glance { grid-template-columns: minmax(0, 1fr); }
  .glance .glance__verdict dd { font-size: 20px; }
}

/* ---------- article text ---------- */
.prose { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.prose > * + * { margin-top: var(--s-5); }
.prose h2 { font-size: clamp(26px, 1vw + 20px, 34px); line-height: 1.2; margin-top: var(--s-8); }
.prose h3 { font: 500 20px/1.35 var(--font-text); margin-top: var(--s-7); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--s-2); }
.prose a { color: var(--action); text-underline-offset: 3px; }
.prose code, .data-table code { font: 0.88em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: color-mix(in oklab, var(--ink) 7%, transparent); padding: 0.1em 0.35em; border-radius: 4px; }
.prose pre { background: var(--p-inv-bg); color: var(--p-inv-ink); padding: var(--s-5); border-radius: var(--r-md); overflow-x: auto; font: 15px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; max-width: 100%; }
.prose pre code { background: none; padding: 0; color: inherit; }
.prose blockquote { margin-left: 0; padding-left: var(--s-5); border-left: 2px solid var(--action); }
@media (max-width: 639px) { .prose { font-size: 17px; } }

/* ---------- wide data tables: full wrap at desktop, one block per row on a phone ---------- */
.table-block { margin: var(--s-8) 0; }
.table-block h2 { font-size: clamp(26px, 1vw + 20px, 34px); line-height: 1.2; margin-bottom: var(--s-3); }
.table-block > p { max-width: 68ch; margin-bottom: var(--s-6); }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); }
.data-table thead th { font-size: var(--t-label); font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--ink); white-space: nowrap; }
.data-table tbody th { font-weight: 500; }
.data-table td.num, .data-table th.num { text-align: right; padding-right: var(--s-5); }
.data-table .best { color: var(--action); font-weight: 500; }
.data-table tr.group th { padding-top: var(--s-6); font-size: var(--t-label); color: var(--muted); border-bottom: 1px solid var(--line); }
.table-note { margin-top: var(--s-4); font-size: var(--t-small); color: var(--muted); max-width: 80ch; }
@media (max-width: 860px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100%; }
  .data-table tbody tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .data-table tbody th { border: 0; padding: 0 0 var(--s-2); font-size: 18px; }
  .data-table td { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: var(--s-3); border: 0; padding: var(--s-1) 0; }
  .data-table td::before { content: attr(data-label); color: var(--muted); font-size: var(--t-small); }
  .data-table td.num, .data-table th.num { text-align: left; padding-right: 0; }
  .data-table tr.group th { padding-top: var(--s-5); }
}

/* ---------- about page ---------- */
.skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-6); }
.skill-groups h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-bottom: var(--s-3); }
.skill-groups ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.skill-groups li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.cv-box { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
.cv-box__text { grid-column: 1 / span 7; }
.cv-box .btn-row { grid-column: 9 / span 4; justify-content: flex-end; }
@media (max-width: 1023px) {
  .cv-box__text, .cv-box .btn-row { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 639px) {
  .skill-groups { grid-template-columns: minmax(0, 1fr); }
  .cv-box { grid-template-columns: minmax(0, 1fr); }
}
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.timeline h3 { font: 500 var(--t-card)/1.3 var(--font-text); }
.timeline p { max-width: 62ch; }
@media (max-width: 639px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
.nw { white-space: nowrap; }
.flow-hero h1 + .lede { margin-top: var(--s-5); }
/* home: the lead post large, the next three as rows beside it */
.tag { color: var(--ink); }
#latest .post-lead .tile__media { aspect-ratio: 16 / 10; }

.post-mini { list-style: none; margin: 0; padding: 0; }
.post-mini li:first-child a { padding-top: 0; }
.post-mini li { border-bottom: 1px solid var(--line); }
.post-mini a { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--s-5); padding: var(--s-5) 0; color: inherit; text-decoration: none; }
.post-mini__media { grid-column: 2; grid-row: 1; display: block; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.post-mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease, ease); }
.post-mini a:hover .post-mini__media img { transform: scale(1.03); }
.post-mini__text { grid-column: 1; grid-row: 1; display: grid; gap: var(--s-2); align-content: start; }
.post-mini__title { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.post-mini a:hover .post-mini__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-mini .verdict-line { font-size: var(--t-body); line-height: 1.5; }
.post-mini .verdict-line b { font-weight: 500; }
@media (max-width: 1279px) { .post-mini a { grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-4); } }
@media (max-width: 1023px) { .post-mini { margin-top: 0; margin-bottom: var(--s-7); } }
.meta { flex-wrap: wrap; } .meta > * { white-space: nowrap; }
.phone-only { display: none; }
@media (min-width: 640px) and (max-width: 1023px) {
  #latest .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #latest .grid > * { grid-column: auto; }
  #latest .post-mini { margin-bottom: 0; }
  #market .wrap.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #market .wrap.grid > * { grid-column: auto; }
  #market .develop { aspect-ratio: auto; height: 100%; max-height: 640px; margin-top: 0; }
  #latest .post-lead .tile__media { aspect-ratio: 4 / 5; }
}
@media (max-width: 639px) {
  #latest .post-lead { order: -1; margin-bottom: var(--s-5); }
  #latest .post-lead .tile__media { aspect-ratio: 2 / 1; }
  #latest .post-lead .verdict-line { display: none; }
  #latest .post-mini__media { display: none; }
  #latest .post-mini a { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) 0; }
  #market .rows > li > p { display: none; }
  #market .develop { aspect-ratio: 16 / 10; }
}
@media (max-width: 639px) {
  #latest .post-mini li:nth-child(3) { display: none; }
  #market .develop { aspect-ratio: 2 / 1; margin-top: var(--s-5); }
  #market .rows > li:nth-child(3) { display: none; }
}
.post-tile .tile__media img { transition: transform 600ms var(--ease, ease); }
.post-tile:hover .tile__media img { transform: scale(1.03); }
@media (max-width: 639px) { #latest .post-mini .verdict-line { display: none; } }
main > section.flow + section.flow.ground-surface { padding-top: var(--s-8); }
main > section.flow.ground-surface + section.flow.ground-surface { padding-top: 0; }
main > section.flow.ground-surface + section.flow:not(.ground-surface) { padding-top: var(--s-8); }