/* lancekeay.com page CSS: only what the kit lacks (picture frames, the post list, the data table). */

/* picture-develops frame: the section's one photograph on the split's right column */
.develop { margin: 0; border-radius: var(--r-lg); overflow: hidden; height: min(560px, var(--ly-fit, 560px)); }
.develop > img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .develop { height: auto; aspect-ratio: 4 / 3; margin-top: var(--s-7); } }

/* rows that hold a post: the title links, the verdict reads in ink, the tag and date sit right */
.rows .rows__name a { color: var(--action); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.rows .rows__name a:hover, .rows .rows__name a:focus-visible { background-size: 100% 2px; }
.rows .rows__name small { display: block; font-weight: 400; color: var(--ink); font-size: var(--t-body); line-height: 1.5; margin-top: var(--s-1); }

/* the sample note under a section head */
.section-head .note, .note { font-size: var(--t-small); line-height: 1.5; color: var(--muted); max-width: 60ch; }

/* tool icons in a row (about: skills) */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.tools li { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.tools li .ic { flex: none; width: 32px; height: 32px; object-fit: contain; }
.tools li span { font-weight: 500; }
@media (max-width: 1023px) { .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
@media (max-width: 639px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools li { min-height: 52px; padding: var(--s-2) var(--s-3); gap: var(--s-3); } .tools li .ic { width: 24px; height: 24px; } }
.tools-group + .tools-group { margin-top: var(--s-6); }
.tools-group > h3 { font-family: var(--font-text); font-size: var(--t-small); font-weight: 500; color: var(--muted); margin-bottom: var(--s-3); }

/* post cards (posts page) and the tag filter */
.filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter button { font: inherit; font-size: var(--t-small); font-weight: 500; min-height: 44px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--ink); color: var(--bg, #fff); border-color: var(--ink); }
.filter button .count { color: inherit; opacity: .7; margin-left: var(--s-1); }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.post-grid .card { min-height: 196px; }
.post-grid .card[hidden] { display: none; }
.post-meta { font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.post-grid .card > h3 { margin-top: var(--s-1); }
.post-grid .card > p { margin-top: auto; }
a.card { color: inherit; text-decoration: none; }
@media (max-width: 1023px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .post-grid { grid-template-columns: 1fr; gap: var(--s-3); } .post-grid .card { min-height: 0; } }

/* the wide comparison table: real table at desktop, one block per tool on a phone, never a sideways scroll */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.5; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-5) 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); padding-top: 0; }
.data-table tbody th { font-family: var(--font-display); font-weight: 400; font-size: var(--t-card); line-height: 1.25; min-width: 8.5em; }
.data-table td { color: var(--ink); font-size: 15px; }
.data-table tr.is-pick th::after { content: ""; display: block; width: 24px; height: 2px; margin-top: var(--s-2); background: var(--action); }
@media (max-width: 1023px) {
  .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 tr { padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .data-table th, .data-table td { border: 0; padding: var(--s-1) 0; }
  .data-table td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s-3); font-size: var(--t-small); }
  .data-table td::before { content: attr(data-label); color: var(--muted); font-weight: 500; font-size: var(--t-label); }
}

/* the CV downloads: two linked cards with the real file-type icons */
.cv-files { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.cv-files .card { flex-direction: row; align-items: center; gap: var(--s-4); min-height: 96px; }
.cv-files .card img { width: 40px; height: 40px; flex: none; }
.cv-files .card span { display: grid; gap: var(--s-1); }
.cv-files .card b { font-weight: 500; font-size: var(--t-card); }
.cv-files .card small { color: var(--muted); font-size: var(--t-small); }
@media (max-width: 639px) { .cv-files { grid-template-columns: 1fr; gap: var(--s-3); } }

/* prose paragraphs in a section column */
.prose p { font-size: 18px; line-height: 1.7; max-width: 62ch; color: var(--ink); }
.prose p + p { margin-top: var(--s-4); }
@media (max-width: 639px) { .prose p { font-size: 16px; } }
.rows .rows__value { color: var(--ink); font-size: var(--t-small); }
.post-grid .card > p.post-meta { margin-top: 0; }
.data-table td[data-label="Verdict"] { font-weight: 500; }
.cv-files .card .cv-glyph { width: 36px; height: 36px; flex: none; fill: none; stroke: var(--action); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.post-grid .card .post-glyph { width: 28px; height: 28px; margin-bottom: var(--s-3); fill: none; stroke: var(--action); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cv-links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-5); }
@media (max-width: 479px) {
  .rows > li:has(> .rows__value) { grid-template-columns: minmax(0, 1fr); }
  .rows > li > .rows__value { grid-column: 1; grid-row: 1; text-align: left; max-width: none; }
}

/* ---- step 2 polish (impeccable critique + audit) ---- */

/* the wide table: the header row stays in view while a long table scrolls under it (desktop only;
   below 1024 the table is one block per row and the header is hidden) */
@media (min-width: 1024px) {
  .data-table thead th { position: sticky; top: var(--nav); z-index: 1; background: var(--bg); padding-top: var(--s-3); box-shadow: inset 0 -1px 0 var(--line); }
  .data-table th:last-child, .data-table td:last-child { padding-right: 0; }
}

/* the review's reading column: rows hold a comfortable measure */
.read-col .rows > li > p { max-width: 64ch; }
.read-col .rows--spec > li { grid-template-columns: 11em minmax(0, 1fr); align-items: baseline; }
.read-col .rows--spec > li > p { grid-column: 2; }
@media (max-width: 639px) { .read-col .rows--spec > li { grid-template-columns: minmax(0, 1fr); } .read-col .rows--spec > li > p { grid-column: 1; } }

/* the one-statement sections: the key phrase keeps the accent without script, and on a one-screen
   section the statement sits in the middle of its screen instead of hanging at the top */
.mo-wh__text strong { font-weight: inherit; color: var(--accent); }
main > .statement > .wrap { justify-content: center; }
.mo-wh__text { max-width: 30ch; }
@media (max-width: 639px) { .mo-wh__text { max-width: none; } }

/* the hero's float card is a link to the market posts */
a.ly-float { text-decoration: none; transition: border-color .2s ease, transform .2s cubic-bezier(.16, 1, .3, 1); }
a.ly-float:hover { border-color: var(--action); }
a.ly-float:hover .ly-float__title { color: var(--action); }
a.ly-float:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }

/* post cards: the one with a page says so; the rest are marked as to come, so nothing looks like a link that is not */
.post-grid .card .post-go { margin-top: var(--s-4); font-size: var(--t-small); font-weight: 500; color: var(--action); display: inline-flex; align-items: center; gap: var(--s-2); }
.post-grid .card .post-soon { margin-top: var(--s-4); font-size: var(--t-small); color: var(--muted); }
.post-grid a.card { border-color: color-mix(in oklab, var(--action) 35%, var(--line)); }
.post-grid a.card:hover h3 { color: var(--action); }
.post-grid .card > p.post-go, .post-grid .card > p.post-soon { margin-top: auto; padding-top: var(--s-4); }

/* footer link lists: 24px targets at least */
.footer__col li > a { display: inline-block; min-height: 24px; padding-block: 3px; }
.post-grid .card > p:not(.post-meta):not(.post-go):not(.post-soon) { margin-top: var(--s-2); }
/* a section whose content outgrows its screen (the post grid once the cards carry their status line)
   grows instead of running into the next section */
main > #list { height: auto; min-height: 100vh; min-height: 100svh; }
.mo-wh__text { line-height: 1.3; }

/* ---- step 3 interaction polish (emil-design-eng + animate) ----
   One strong ease-out for anything that responds to the reader; hovers are colour-only or a 2px move,
   gated to fine pointers so a phone never keeps a stuck hover; presses answer at once (scale .97). */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --t-hover: 160ms; --t-press: 120ms; }
a, button { -webkit-tap-highlight-color: transparent; }
:target, [id] { scroll-margin-top: calc(var(--nav, 64px) + var(--s-4)); }

/* the tag filter: chips change colour on hover, press in, and the pressed one fills without a jump */
.filter button {
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease,
              transform var(--t-press) var(--ease-out);
}
.filter button:active { transform: scale(.97); }
.filter button:focus-visible { outline-offset: 3px; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .filter button[aria-pressed="false"]:hover { border-color: var(--line-strong); background: color-mix(in oklab, var(--ink) 5%, var(--card)); }
}
/* cards shown by a filter fade up 6px (site.js, via WAAPI so a second click retargets instead of restarting) */

/* post cards: the title colour follows the hover in step with the lift, the arrow draws on hover and focus */
.post-grid .card > h3 { transition: color var(--t-hover) ease; }
.post-grid a.card:focus-visible { outline-offset: 4px; border-radius: var(--r-md); }
.post-grid a.card:focus-visible h3 { color: var(--action); }
.post-grid a.card:active { transform: scale(.985); transition-duration: var(--t-press); }
.post-grid a.card:focus-visible .post-go .m-arrow__stem { opacity: 1; transform: none; }
.post-grid a.card:focus-visible .post-go .m-arrow__head { transform: translateX(3px); }
@media (hover: hover) and (pointer: fine) {
  .post-grid a.card:hover .post-go .m-arrow__stem { opacity: 1; transform: none; transition-duration: var(--t-hover); }
  .post-grid a.card:hover .post-go .m-arrow__head { transform: translateX(3px); transition-duration: var(--t-hover); }
}

/* the hero's "Latest post" card: a 2px lift with the border, a press, the title colour in step */
a.ly-float { transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease, transform var(--t-hover) var(--ease-out); }
a.ly-float .ly-float__title { transition: color var(--t-hover) ease; }
a.ly-float:focus-visible .ly-float__title { color: var(--action); }
@media (hover: hover) and (pointer: fine) {
  a.ly-float:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -18px rgb(20 24 33 / .35); }
}
a.ly-float:active { transform: scale(.98); transition-duration: var(--t-press); }

/* the post-list title links: the underline thickens on the same curve as every other hover */
.rows .rows__name a { transition: background-size var(--t-hover) var(--ease-out), color var(--t-hover) ease; }

/* the CV download cards on About press in like buttons */
.cv-files a.card:active { transform: scale(.98); transition-duration: var(--t-press); }

/* the wide table: the row under the pointer takes a faint tint so the eye can follow it across
   eight columns. Instant on purpose: it is seen dozens of times a read, and a fade would lag the pointer */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover > * { background: color-mix(in oklab, var(--action) 5%, var(--bg)); }
  .data-table tbody tr > * { background-clip: padding-box; }
}

/* the phone menu button: its two lines turn into a cross while the menu is open, and it presses in */
.nav__toggle { transition: border-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.nav__toggle:active { transform: scale(.95); }
.nav__toggle svg { overflow: visible; }
.nav__toggle .tl { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-box: view-box; transform-origin: 9px 9px;
                   transition: transform 220ms var(--ease-out); }
.nav__toggle[aria-expanded="true"] .tl--a { transform: rotate(45deg) translateY(4px); }
.nav__toggle[aria-expanded="true"] .tl--b { transform: rotate(-45deg) translateY(-4px); }

/* text selection in the brand blue, the colour of every other mark the reader makes */
::selection { background: color-mix(in oklab, var(--action) 22%, transparent); }

/* reduced motion: nothing moves or scales, but colour and opacity changes still fade, because they
   carry meaning (which chip is on, which card is a link). The kit zeroes every transition, so these
   few are put back with their properties limited to colour. */
@media (prefers-reduced-motion: reduce) {
  html .filter button, html .post-grid .card > h3, html a.ly-float, html a.ly-float .ly-float__title, html .rows .rows__name a {
    transition-property: background-color, color, border-color !important; transition-duration: 160ms !important;
  }
  .filter button:active, .post-grid a.card:active, a.ly-float, a.ly-float:hover, a.ly-float:active,
  .cv-files a.card:active, .nav__toggle:active { transform: none !important; }
  .nav__toggle .tl { transition: none; }
}