/* LanceTek page CSS: only what sits inside a visual (the drawn windows), one --p-h per card group,
   and the app-frame recipe. Tokens, grid, buttons, cards and type come from the kit (assets/). */

/* ---------- drawn windows (hero and split frames): light app chrome ---------- */
.d-win { background: #fff; color: #16181a; border-radius: 12px; overflow: hidden; font: 400 14px/1.4 var(--font-text);
         box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 24px 60px -28px rgb(0 0 0 / .45); text-align: left; }
.d-win__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgb(0 0 0 / .07); font-size: 13px; color: #5d6268; }
.d-win__bar b { color: #16181a; font-weight: 500; } .d-win__bar .sp { flex: 1; }
.d-win__dots { display: flex; gap: 6px; } .d-win__dots i { width: 10px; height: 10px; border-radius: 50%; background: #dcdfe2; }
.d-win__body { display: grid; grid-template-columns: 270px 1fr; min-height: 420px; }
.d-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; background: #eef3ef; color: #1f6b3a; font-size: 13px; font-weight: 500; }
.inbox { border-right: 1px solid rgb(0 0 0 / .07); padding: 10px; display: grid; align-content: start; gap: 2px; }
.inbox .q { height: 34px; margin-bottom: 6px; border-radius: 9px; background: rgb(0 0 0 / .04); display: flex; align-items: center; padding: 0 10px; color: #7b8086; font-size: 13px; }
.inbox .t { display: grid; grid-template-columns: 30px 1fr auto; gap: 1px 10px; padding: 9px 8px; border-radius: 9px; font-size: 13px; }
.inbox .t.is-on { background: rgb(31 107 58 / .08); }
.inbox .t i { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #f1f2f1; }
.inbox .t i img { width: 18px; height: 18px; }
.inbox .t b { font-weight: 500; color: #16181a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inbox .t time { color: #7b8086; font-size: 13px; }
.inbox .t span { grid-column: 2 / -1; color: #5d6268; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo { display: grid; min-width: 0; align-content: start; }
.d-chat { display: grid; gap: 8px; align-content: start; padding: 14px 18px; font-size: 14px; }
.d-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; }
.d-msg--me { justify-self: end; background: #f1f2f1; color: #16181a; border-bottom-right-radius: 6px; }
.d-msg--bot { background: #10301c; color: #f3f6f3; border-bottom-left-radius: 6px; max-width: 88%; }
.d-msg small { display: inline; margin-left: 8px; font-size: 13px; opacity: .72; white-space: nowrap; }
.d-tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6a6f74; }
.d-tool::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; }
.acts { display: flex; gap: 8px; } .acts span { height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; background: #0a0a0a; color: #fff; }
.acts span + span { background: rgb(0 0 0 / .06); color: #16181a; }
.hero__window { background: radial-gradient(80% 90% at 20% 10%, #dfe7da 0, transparent 60%), radial-gradient(70% 80% at 85% 30%, #e8e1d3 0, transparent 60%), #d6ddd2; }
@media (max-width: 639px) {
  .d-win__body { grid-template-columns: 1fr; } .inbox { display: none; }
  .d-win__bar .sp ~ span { display: none; }
  .hero__window .d-tool, .hero__window .d-msg small { display: none; }
  .d-chat { font-size: 13px; padding: 12px 14px; }
}

/* ---------- card groups ---------- */
#services .panel { --p-h: 336px; }
#services .ui-term__path { max-width: 28ch; }
@media (max-width: 639px) { #services .panel { --p-h: 220px; } }

/* process: the timeline diagram held in one frame across the wrap */
.timeline-frame { --p-h: 300px; margin-top: var(--s-7); }
.steps4 { margin-top: var(--s-7); }
.steps4 h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: var(--s-3) 0 var(--s-2); }
.steps4 p { margin: 0; }
@media (max-width: 639px) { .timeline-frame { --p-h: 220px; } }

/* journal rows: a real tool icon tile, the title and one line, the reading time */
.jrows { list-style: none; margin: 0; padding: 0; }
.jrows li { border-bottom: 1px solid var(--line); }
.jrows a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-5) 0; color: inherit; text-decoration: none; }
.jrows .ic-set { display: flex; gap: 8px; }
.jrows .ic-set span { width: 48px; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.jrows .ic-set img { width: 26px; height: 26px; }
.jrows h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin: 0 0 var(--s-1); }
.jrows p { margin: 0; }
.jrows .meta { color: var(--muted); font-size: var(--t-small); white-space: nowrap; }
@media (max-width: 639px) { .jrows a { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .jrows .meta { white-space: normal; } }

/* ---------- app-frame (sections-library.md, app-frame) ---------- */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* the menu cards' icon panels */
.menu-card .panel.ic-panel { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--g-alt); }
.ic-panel span { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.ic-panel img { width: 28px; height: 28px; }

/* hero lead in the ink (7:1) */
.hero__lead { color: var(--ink) !important; }
/* the mock's own buttons take the page's button pair */
.acts span { background: var(--action); color: var(--action-ink); border-radius: var(--r-btn); }
.acts span + span { background: #e2e2e2; color: #0a0a0a; }
/* step titles carry their number */
.steps4 h3 { display: flex; align-items: center; gap: var(--s-3); }
.steps4 h3 .step-num { flex: none; }
.timeline-frame { height: 260px; position: relative; }
.timeline-frame > .dg { position: absolute; inset: 0; }
/* the journal list beside the draft */
.jrows--short { margin-top: var(--s-6); border-top: 1px solid var(--line); }
.jrows--short a { grid-template-columns: 48px minmax(0, 1fr) auto; padding: var(--s-4) 0; }
.jrows--short .ic-set span { width: 44px; height: 44px; }
.jrows--short h3 { margin: 0; }
.jlink { margin-top: var(--s-5); }
@media (max-width: 639px) { .jrows--short a { grid-template-columns: 44px minmax(0, 1fr); } .jrows--short .meta { display: none; } }

/* the written scope, drawn across the wrap on the dark band */
.scope-frame { margin-top: var(--s-7); }
.scope { font-size: 14px; }
.scope__rows { padding: 4px 18px 10px; }
.scope__row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 96px 110px 110px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgb(0 0 0 / .07); color: #16181a; }
.scope__row:last-child { border-bottom: 0; }
.scope__head { color: #5d6268; font-size: 13px; padding: 10px 0 8px; }
.scope__row > span:nth-child(4) { font-variant-numeric: tabular-nums; font-weight: 500; }
.scope__row .d-tag { justify-self: start; }
.d-tag--next { background: #f3ede1; color: #6b4a16; }
.d-tag--opt { background: #eceeed; color: #3d4247; }
@media (max-width: 639px) {
  .scope__row { grid-template-columns: 28px minmax(0, 1fr) 64px; gap: 10px; }
  .scope__row > span:nth-child(3), .scope__row > span:nth-child(5) { display: none; }
  .scope__head { display: none; }
}
/* the scope sits on the band itself, no panel round it */
.scope-frame.frame { background: transparent; border: 0; box-shadow: none; padding: 0; }
.scope-frame.frame::before, .scope-frame.frame::after { display: none; }
#journal .frame--split { --ratio: 100%; }

/* ---------- shared inner-page pieces ---------- */
.hero__art { background: radial-gradient(70% 60% at 18% 12%, #e9eee5, transparent 70%), radial-gradient(60% 50% at 90% 100%, #c9d4c2, transparent 70%), #d6ddd2; }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.hero__proof { font-size: var(--t-small); color: var(--muted); margin-top: var(--s-5); }
.d-card { background: #fff; color: #16181a; border-radius: 12px; padding: 14px 16px; font: 400 14px/1.4 var(--font-text); text-align: left; box-shadow: 0 0 0 1px rgb(0 0 0 / .07), 0 18px 44px -20px rgb(0 0 0 / .45); }
.d-card h5 { margin: 0 0 4px; font: 500 14px/1.3 var(--font-text); }
.d-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e7f4ec; color: #17673f; font-style: normal; font-size: 13px; }
.d-note__line b { font-weight: 500; color: #16181a; }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }

/* facts: label and line pairs beside a heading */
.facts { margin: 0; display: grid; gap: var(--s-4); }
.facts > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 500; }
.facts dd { margin: 0; }
.facts--stack > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
@media (max-width: 639px) { .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); } }

/* services: the phase checklist in the hero art */
.phase-win { position: absolute; left: 48px; top: 56px; right: -28px; z-index: 1; }
.phase-list { list-style: none; margin: 0; padding: 8px 18px 14px; }
.phase-list li { display: flex; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgb(0 0 0 / .06); font-size: 14px; color: #3d4247; }
.phase-list li:last-child { border-bottom: 0; }
.phase-list i { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1.5px solid #c5c9c6; font-style: normal; font-size: 12px; }
.phase-list li.is-done i { background: #1f6b3a; border-color: #1f6b3a; color: #fff; }
.phase-list b { font-weight: 500; color: #16181a; }
@media (max-width: 1023px) { .phase-win { left: 24px; top: 24px; right: 24px; } }
.dg-frame { background: var(--g-alt); }
.dg-frame > .dg { position: absolute; inset: 0; }
.frame--wide { height: 440px; margin-top: var(--s-7); }
@media (max-width: 1023px) { .frame--wide { height: 380px; } }
@media (max-width: 639px) { .frame--wide { height: 340px; } }
.rows .rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.stack-row { margin-top: var(--s-8); }

/* about */
.note-body { padding: 14px 20px 20px; }
.note-h { margin: 10px 0 4px; font-size: 13px; color: #5d6268; }
.note-list { margin: 0; padding: 0 0 0 18px; font-size: 14px; color: #3d4247; }
.note-list li { padding: 3px 0; }
.note-list b { font-weight: 500; color: #16181a; }
.stack-frame { height: 480px; margin-top: var(--s-7); background: var(--g-alt); }
.stack-frame > .dg { position: absolute; inset: 0; }
@media (max-width: 639px) { .stack-frame { height: 420px; } }
.lab-frame { background: #1c1d1f; display: grid; align-items: start; padding: 40px 0 0 40px; }
.lab-win { border-top-right-radius: 0; border-bottom-left-radius: 0; height: 100%; }
.lab-ic { width: 16px; height: 16px; }
.lab-list { list-style: none; margin: 0; padding: 4px 18px; }
.lab-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgb(0 0 0 / .06); font-size: 14px; }
.lab-list b { display: block; font-weight: 500; color: #16181a; font-family: var(--font-mono); font-size: 13px; }
.lab-list small { color: #5d6268; font-size: 13px; }
.lab-id { color: #5d6268; font-variant-numeric: tabular-nums; font-size: 13px; }
.lab-st { font-size: 13px; font-weight: 500; color: #1f6b3a; padding-right: 8px; }
.lab-st--off { color: #5d6268; }
@media (max-width: 639px) { .lab-frame { padding: 16px 0 0 16px; } }

/* journal: collage pieces, the statement and the entries */
.ly-collage { container-type: inline-size; background: radial-gradient(70% 60% at 20% 15%, #edf1f5, transparent 70%), #d6dee6; }
.ly-collage .ly-piece { box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 22px 48px -22px rgb(0 0 0 / .4); }
.pc-card { background: #fff; color: #16181a; border-radius: 12px; padding: 3.2cqw 3.6cqw; display: grid; gap: 1.6cqw; font: 400 max(13px, 2.1cqw)/1.4 var(--font-text); }
.pc-card .lbl { display: flex; align-items: center; gap: 1.4cqw; color: #5d6268; font-size: max(13px, 1.8cqw); }
.pc-card .lbl img { width: max(16px, 2.6cqw); height: max(16px, 2.6cqw); }
.pc-card strong { font: 400 max(18px, 4.4cqw)/1.05 var(--font-display); letter-spacing: -0.02em; }
.pc-card p { margin: 0; color: #3d4247; }
.pc-verdict { background: #10301c; color: #f3f6f3; }
.pc-verdict .lbl { color: #b9d3c1; }
.pc-verdict p { color: #f3f6f3; }
.flow { display: flex; align-items: center; gap: 1.2cqw; flex-wrap: wrap; }
.flow span { display: inline-flex; align-items: center; gap: 1cqw; padding: 1.2cqw 1.6cqw; border-radius: 1.6cqw; background: #f1f2f1; font-weight: 500; }
.flow span img { width: max(16px, 2.6cqw); height: max(16px, 2.6cqw); }
.flow i { width: 2.4cqw; height: 1px; background: #9aa0a6; }
.pc-vm .ln { display: flex; justify-content: space-between; gap: 2cqw; padding-top: 1.4cqw; border-top: 1px solid #ececea; }
.pc-vm .ln span { display: inline-flex; align-items: center; gap: 1cqw; }
.pc-vm .ln img { width: max(16px, 2.6cqw); height: max(16px, 2.6cqw); }
.pc-vm .ln em { font-style: normal; color: #1f6b3a; font-weight: 500; }
@media (max-width: 639px) { .pc-card p { display: none; } .pc-verdict p { display: block; } }
.statement .mo-la__type { font: var(--display-weight) clamp(44px, 7.4vw, 112px)/1 var(--font-display); letter-spacing: var(--display-tracking-xl); margin: 0; max-width: 14ch; }
.statement .mo-la__sub { margin-top: var(--s-6); max-width: 46ch; }
.statement__text { font: var(--display-weight) clamp(28px, 3.6vw, 52px)/1.15 var(--font-display); letter-spacing: var(--display-tracking); max-width: 26ch; margin: 0; }
.entries { list-style: none; margin: var(--s-7) 0 0; padding: 0; border-top: 1px solid var(--line); }
.g2 > .wrap > .entries { margin-top: 0; }
.entry { display: grid; grid-template-columns: 112px minmax(0, 1fr) 160px; gap: var(--s-5); align-items: start; padding: var(--s-6) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.entry .ic-set { display: flex; gap: 8px; }
.entry .ic-set span { width: 48px; height: 48px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.entry .ic-set img { width: 26px; height: 26px; }
.entry h3 { font: 400 var(--t-h3)/1.15 var(--font-display); letter-spacing: var(--display-tracking); margin: 0 0 var(--s-2); }
.entry p { margin: 0; max-width: 60ch; }
.entry .meta { color: var(--muted); font-size: var(--t-small); text-align: right; }
@media (max-width: 639px) { .entry { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .entry .meta { text-align: left; } }

/* contact */
.form-card { background: var(--g-alt); border-radius: var(--r-lg); padding: var(--s-7); align-self: start; }
.form textarea { width: 100%; min-height: 112px; padding: 12px 14px; font: 400 16px/1.5 var(--font-text); border: 1px solid rgb(0 0 0 / .2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); resize: vertical; }
@media (max-width: 639px) { .form-card { padding: var(--s-5); } }
.next-frame { height: 260px; margin-top: var(--s-7); }
.next-frame > .dg { position: absolute; inset: 0; }
.steps3 { margin-top: var(--s-7); }
.form-card { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.facts--gap { margin-top: var(--s-4); }
.reply-frame { height: 400px; margin-top: var(--s-7); }
.reply-body { padding: 18px 24px 24px; font-size: 15px; line-height: 1.55; color: #26292c; display: grid; gap: 10px; }
.reply-body p { margin: 0; } .reply-body b { font-weight: 500; color: #16181a; }
@media (max-width: 639px) { .reply-frame { height: 380px; } .reply-body { padding: 14px 16px; font-size: 14px; } }
.scope-frame .scope { width: 100%; }
.phase-win { right: 32px; }
#automation .frame--split, #method .frame--split { --ratio: 100%; }
@media (max-width: 639px) { .note-hide { display: none; } }
/* journal entry cards: the tools' real icons on a still ground */
.entry-card { scroll-margin-top: 96px; }
#entries .panel { --p-h: 168px; order: -1; margin-bottom: var(--s-5); display: grid; place-items: center; border-radius: var(--r-md); }
.ic-row { position: relative; z-index: 1; display: flex; gap: 12px; }
.ic-row span { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 12px 28px -14px rgb(0 0 0 / .35); }
.ic-row img { width: 34px; height: 34px; }
.entry-card .meta { color: var(--muted); font-size: var(--t-small); margin-top: var(--s-2); }
@media (max-width: 639px) { #entries .panel { --p-h: 120px; } }
.statement .mo-la__sub { color: var(--ink); }
.reply-piece { position: absolute; left: 48px; top: 56px; right: 32px; z-index: 1; }
@media (max-width: 1023px) { .reply-piece { left: 24px; top: 24px; right: 24px; } }
@media (max-width: 639px) {
  .hero__art > .ly-piece.phase-win { display: block; left: 16px; top: 16px; right: 16px; }
  .hero__art:has(> .phase-win) > .ly-float { display: none; }
}
@media (max-width: 639px) { .hero__art > .ly-piece.reply-piece { display: block; left: 16px; top: 16px; right: 16px; } }
@media (max-width: 639px) { .reply-body p:nth-of-type(3) { display: none; } }
.next-steps { list-style: none; margin: var(--s-6) 0 var(--s-5); padding: 0; display: grid; gap: var(--s-5); }
.next-steps h3 { display: flex; align-items: center; gap: var(--s-3); font: 500 var(--t-card)/1.3 var(--font-text); margin: 0 0 var(--s-2); }
.next-steps p { margin: 0; }
.lab-frame { height: 520px; overflow: hidden; }
#homelab .frame--split { --ratio: auto; }
#entries .panel { height: 168px; flex: 0 0 auto; }
@media (max-width: 639px) { #entries .panel { height: 112px; } #entries .card p:not(.meta) { display: none; } }
.ly-collage .pc-card { background: #fff; }
.ly-collage .pc-verdict { background: #10301c; }
#entries .grid { row-gap: var(--s-6); }
#entries .panel { height: 120px; }
@media (max-width: 639px) { #entries .panel { height: 72px; } #entries .ic-row span { width: 44px; height: 44px; } #entries .ic-row img { width: 24px; height: 24px; } }
.ready-frame { height: 220px; margin-top: var(--s-5); }
.next-steps { gap: var(--s-4); margin-top: var(--s-5); }
.stack-frame { height: 400px; }
#entries .panel { height: 88px; }
#entries .grid { row-gap: var(--s-5); }
.ready-frame { height: 320px; }
#entries .panel { height: 72px; }
#entries .ic-row span { width: 52px; height: 52px; }
#entries .ic-row img { width: 28px; height: 28px; }
@media (max-width: 639px) { #services .panel { --p-h: 320px; } }
#entries .panel { --p-h: 72px; height: 72px; margin-bottom: var(--s-4); }
#entries .panel { --p-h: 112px; height: 112px; }

/* ---------- motion pass (step 2): five gaps the kit's motion layer left open ----------
   Tokens are the kit's own (assets/motion/motion.css): --m-ease, --m-panel 200ms, --m-in 150ms, --m-out 120ms.
   Transform and opacity only. Under reduced motion each keeps a short fade or a still state, never travel. */

/* 1. the phone menu sheet: was display:none to full screen in one frame. It now settles down 8px and fades in;
   the bar of actions rises from the bottom edge. Closing stays instant: the sheet's position is undone with its
   class, so a fading exit would flash in the header bar (and a tap that closes it usually leaves the page). */
@media (max-width: 1023px) {
  .nav.is-open .nav__links { transition: opacity var(--m-panel) var(--m-ease), transform var(--m-panel) var(--m-ease); }
  @starting-style { .nav.is-open .nav__links { opacity: 0; transform: translateY(-8px); } }
  .nav.is-open .nav__actions { animation: lt-rise var(--m-panel) var(--m-ease) both; }
  /* 2. a section's links inside the sheet (Services): fade down 4px as the chevron turns */
  .nav.is-open .nav__item.is-expanded .nav__menu { transition: opacity 180ms var(--m-ease), transform 180ms var(--m-ease); }
  @starting-style { .nav.is-open .nav__item.is-expanded .nav__menu { opacity: 0; transform: translateY(-4px); } }
}
@keyframes lt-rise { from { transform: translateY(100%); } }

/* 3. arriving on journal.html#n8n (the Home rows link to one card of six): a ring round that card comes up,
   holds long enough to be found and fades. Reduced motion: the ring is simply there and stays. */
.entry-card { position: relative; }
.entry-card::after { content: ""; position: absolute; inset: calc(-1 * var(--s-3)); border-radius: calc(var(--r-lg) + var(--s-2));
  box-shadow: 0 0 0 2px var(--accent); opacity: 0; pointer-events: none; }
.entry-card:target::after { animation: lt-found 2400ms var(--m-ease) 200ms both; }
@keyframes lt-found { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* 4. a form error (shown on submit only): fades in from 3px above, so it reads as a reply to the press */
.field__error { transition: opacity 160ms var(--m-ease), transform 160ms var(--m-ease); }
@starting-style { .field__error:not([hidden]) { opacity: 0; transform: translateY(-3px); } }

/* 5. the Home Journal rows had no hover at all: the title's underline comes in and the icon tile lifts 2px,
   as the cards do (150ms in, 120ms out) */
.jrows h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent;
  transition: text-decoration-color var(--m-out) var(--m-ease); }
.jrows .ic-set span { transition: transform var(--m-out) var(--m-ease), box-shadow var(--m-out) var(--m-ease); }
@media (hover: hover) and (pointer: fine) {
  .jrows a:hover h3 { text-decoration-color: currentColor; transition-duration: var(--m-in); }
  .jrows a:hover .ic-set span { transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 10px 20px -12px rgb(0 0 0 / .35); transition-duration: var(--m-in); }
}
.jrows a:focus-visible h3 { text-decoration-color: currentColor; }

/* reduced motion: the kit cuts every transition to 0; these keep a short fade (it explains the change) without the travel */
@media (prefers-reduced-motion: reduce) {
  .nav.is-open .nav__links, .nav.is-open .nav__item.is-expanded .nav__menu, .field__error {
    transition: opacity 160ms ease !important; transform: none !important; }
  .nav.is-open .nav__actions { animation: none !important; }
  .entry-card:target::after { animation: none !important; opacity: 1; }
  .jrows a:hover .ic-set span { transform: none !important; }
}