/* DataCo preview: parts below the first screen added in LP 09 (sections 2-6 and 3). Loaded without blocking the first paint (index.html). */
/* ===== LP 09 (2026-10-06): sections 2-6 and 3 from the confirmed boards (outputs/20261006_dataco_site_boards_01) ===== */
/* ② */
.why-k { font-size: 20px; line-height: 1.7; letter-spacing: .06em; color: var(--ink); margin: 0 0 18px; }
.log-k li { grid-template-columns: 5.6em 1fr; }
#why .one { margin: 2.4em 0 0; }
@media (max-width: 640px) {
  .why-k { font-size: 17px; }
  .log-k li { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .log-k time { font-size: 16px; }
  #why .one li { font-size: 14px; padding-left: 4px; padding-right: 4px; }
}

/* ④(1) the morning note as a Slack post (no Slack logo) */
.slk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -20px 14px; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.slk-bar .ch { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.slk-bar .ch i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.slk-bar .app { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.slk-bar .app b { padding: 1px 8px; border: 1px solid var(--rule); border-radius: 4px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.slk-msg { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.slk-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--accent); }
.slk-av svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.slk-msg .bd { padding: 0 6px; border: 1px solid var(--rule); border-radius: 3px; font-size: 14px; color: var(--ink-3); }
.slk-th { margin-top: 12px; font-family: var(--sans); font-size: 14px; color: var(--accent); }
@media (max-width: 640px) { .slk-bar { flex-wrap: wrap; margin: -18px -20px 12px; } .slk-bar .app { white-space: normal; } }

/* ④(2) the AI part, then the report part on the one-step-lighter ground */
.mcp-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 16px; letter-spacing: .06em; }
.mcp-k b { font-size: 18px; color: var(--ver); letter-spacing: .08em; }
.mcp-k span { font-size: 14px; color: var(--ink-3); }
.r2.r2b { --paper: #10141c; --paper-2: #10141c; background: var(--paper); }
.pics.pics-b { margin-top: 36px; gap: 36px 40px; }
.pics .ref { display: block; }
.rep { margin: 72px 0 0; padding: 44px 44px 30px; border: 1px solid var(--rule); background: rgba(255,255,255,.028); box-sizing: border-box; }
.rep-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 12px 56px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid var(--rule); }
.rep-k { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .16em; color: var(--ver); margin: 0 0 12px; }
.rep-k i { display: block; width: 40px; height: 2px; background: var(--ver); box-shadow: var(--glow); }
.rep-t { font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--ink); letter-spacing: .02em; }
.rep-s { font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.rep-lab { display: flex; align-items: baseline; gap: 14px; margin: 36px 0 18px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.rep-lab .n { font-family: var(--latin); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--ver); margin-right: -4px; }
.rep-lab small { font-size: 14px; font-weight: 400; letter-spacing: .02em; color: var(--ink-3); }
.rep-cy { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; position: relative; }
.rep-cy::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; background: var(--ver); box-shadow: var(--glow); }
.rep-cy li { position: relative; padding: 34px 12px 0 0; }
.rep-cy li::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; background: var(--paper); border: 3px solid var(--ver); box-shadow: var(--glow); }
.rep-cy .w { display: block; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.rep-cy .t { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; line-height: 1.65; color: var(--ink); }
.rep-cy .x { display: block; margin-top: 6px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.rep-nt { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
.rep-nt li { padding: 18px 8px 18px 0; border-top: 1px solid var(--rule); }
.rep-nt li:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
.rep-nt .t { display: block; font-size: 16px; font-weight: 700; line-height: 1.65; color: var(--ink); }
.rep-nt .x { display: block; margin-top: 4px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
.rep-lead { max-width: 760px; margin: 0 0 22px; font-size: 16px; line-height: 1.9; color: var(--ink-2); }
.rep-rv { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px 48px; align-items: start; }
.rep-tb { border: 1px solid var(--rule); background: rgba(4,6,10,.55); }
.rep-tb .r { display: grid; grid-template-columns: .8fr 1.4fr 1.4fr 1.4fr 118px; gap: 0 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--rule); }
.rep-tb .r.hd { border-top: 0; padding: 11px 20px; font-size: 14px; letter-spacing: .04em; color: var(--ink-3); }
.rep-tb .r.hd span:last-child { text-align: center; }
.rep-tb i { display: block; height: 2px; margin: 6px 0; border-radius: 1px; background: rgba(214,220,232,.38); }
.rep-tb .v { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; padding: 4px 0; border-radius: 999px; border: 1px solid rgba(214,220,232,.5); color: var(--ink); white-space: nowrap; }
.rep-tb .v.ok { color: var(--ver); border-color: var(--ver); box-shadow: var(--glow); }
.rep-tb .v.na { color: var(--ink-3); border: 1px dashed var(--gline); }
.rep-rl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rep-rl li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.8; color: var(--ink); }
.rep-rl li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--ver); box-shadow: var(--glow); }
.rep-rl small { display: block; font-size: 14px; color: var(--ink-2); }
.rep figcaption { margin-top: 22px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
@media (max-width: 960px) {
  .rep-rv { grid-template-columns: 1fr; }
  .rep-head { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rep { margin-top: 48px; padding: 24px 20px 20px; }
  .rep-t { font-size: 21px; }
  .rep-s, .rep-lead { font-size: 15px; }
  .rep-lab { flex-wrap: wrap; gap: 4px 12px; margin: 30px 0 14px; }
  /* the table: when, what was done, verdict */
  .rep-tb .r { grid-template-columns: .7fr 1.6fr auto; gap: 0 12px; padding: 14px 14px; }
  .rep-tb .r > span:nth-child(2), .rep-tb .r > span:nth-child(4) { display: none; }
  .rep-tb .r.hd { padding: 10px 14px; }
  .rep-tb .v { padding: 4px 12px; }
  /* how often: a vertical vermilion line with three points (the same build as ⑥'s line) */
  .rep-cy { grid-template-columns: 1fr; padding-left: 28px; }
  .rep-cy::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .rep-cy li { padding: 0 0 22px; }
  .rep-cy li::before { left: -28px; top: 6px; }
  .rep-nt { grid-template-columns: 1fr; }
  .rep-nt li:nth-last-child(-n+3) { border-bottom: 0; }
  .rep-nt li:last-child { border-bottom: 1px solid var(--rule); }
}
/* ④(3) the three steps as drawings */
.step-fig { margin: 0; }
.step-fig svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ④(4) what we build outside the ads */
.own { display: grid; gap: 30px; align-content: start; }
.own-k { margin: 0; font-size: 15px; letter-spacing: .1em; color: var(--ink-3) !important; }
.own-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
.own-row svg { display: block; width: 100%; height: auto; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.own-t { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--ink) !important; }
.own-x { margin: 0; font-size: 16px; line-height: 1.8; }
@media (max-width: 640px) { .own-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } .own-t { font-size: 18px; } .own-x { font-size: 15px; } }

/* ⑤ the head does not follow (LP12: the old circles-and-arrows figure was removed) */
@media (min-width: 1024px) { #ai .ch-static { grid-row: 1; position: static; } }
.ai-after { margin-top: 56px; }

/* ③ four steps in order */
.steps4 { list-style: none; margin: 1.6em 0 2.2em; padding: 0; display: grid; gap: 36px; }
.steps4 li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; align-items: start; }
.steps4 .n { font-family: var(--latin); font-weight: 600; font-size: 26px; line-height: 1.5; letter-spacing: .04em; color: var(--accent); }
.steps4 .h { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.6; color: var(--ink) !important; }
.steps4 p { margin: 0; }
@media (max-width: 640px) { .steps4 { gap: 28px; } .steps4 li { grid-template-columns: 44px minmax(0, 1fr); gap: 0 8px; } .steps4 .n { font-size: 22px; } .steps4 .h { font-size: 19px; } }
/* LP09 phones: ②'s line stands vertically so the four labels stay on one line each */
@media (max-width: 640px) {
  #why .one ol { grid-template-columns: 1fr; padding-left: 26px; }
  #why .one ol::before { left: 7px; right: auto; top: 10px; bottom: 26px; width: 3px; height: auto; }
  #why .one li { text-align: left; padding: 0 0 16px; font-size: 15px; }
  #why .one li::before { left: -26px; top: 6px; margin-left: 0; }
}

/* ===== LP 11+12 (2026-10-06): boards_04. ④ is laid out per tale (the lead first), the report case is folded, ⑤ is a flat figure ===== */
/* ④ number tags and the index under the big head */
.tale-n { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: 14px; letter-spacing: .1em; color: var(--ink-3) !important; }
.tale-n b { font-family: var(--latin); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--accent); }
.reach-idx { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.reach-idx li { padding: 16px 0 0; border-top: 1px solid var(--ink); }
.reach-idx a { display: block; text-decoration: none; }
.reach-idx .tale-n { margin: 0 0 6px; }
.reach-idx span.t { display: block; font-family: var(--serif); font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.reach-idx a:hover span.t { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1023px) { .reach-idx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; margin-top: 28px; } .reach-idx span.t { font-size: 16px; } }
@media (max-width: 360px) { .reach-idx { grid-template-columns: 1fr; } }

/* 01 見る: the Slack note large on the left; tag, head, text and the notes down the right column */
.r1-grid.r1-grid2 { margin-top: 0; }
.r1-head h3 { margin: 0 0 18px; font-size: 32px; line-height: 1.5; }
.r1-head p { margin: 0; }
@media (min-width: 961px) {
  .r1-grid2 .r1-head { grid-column: 2; grid-row: 1; }
  .r1-grid2 .notes3 { grid-row: 2; padding-top: 44px; }
}
@media (max-width: 960px) {
  .r1-grid2 .r1-head { order: -2; margin-bottom: 28px; }
  .r1-head h3 { font-size: clamp(22px, 6vw, 28px); }
}

/* 02 伝える / 03 直す: tag and head across the frame, then the rest */
.tale-top h3 { margin: 0; font-size: 36px; font-weight: 500; line-height: 1.5; letter-spacing: .04em; color: var(--ink); }
.tale-top .sub { margin: 14px 0 0; max-width: 680px; }
.ai-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 0 64px; align-items: start; margin-top: 44px; }
.ai-split .tx p { margin: 0 0 1.4em; }
.ai-split .chat { margin: 0; max-width: none; }
.mcp-k { margin: 0 0 18px; }
@media (max-width: 1023px) {
  .tale-top h3 { font-size: clamp(22px, 6vw, 30px); }
  .ai-split { display: block; margin-top: 24px; }
  .ai-split .chat { margin-top: 2em; }
}

/* 04 広げる: the drawn search page large on the left; tag, head, text and the three rows on the right */
@media (min-width: 1024px) {
  .r4-stack.r4-stack2 { margin-top: 0; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 64px; }
  .r4-stack2 .serp { align-self: center; }
}
.r4-side h3 { margin: 0 0 18px; font-size: 32px; line-height: 1.5; }
.r4-lead { margin: 0 0 40px; }
.r4-stack2 .own-row { grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
@media (max-width: 1023px) {
  /* phones: head and text, then the search page, then the three rows */
  .r4-stack.r4-stack2 { display: flex; flex-direction: column; gap: 0; margin-top: 0; }
  .r4-side { display: contents; }
  .r4-side > .tale-n, .r4-side > h3, .r4-side > .r4-lead { order: 1; }
  .r4-stack2 .serp { order: 2; margin-bottom: 36px; }
  .r4-stack2 .own { order: 3; }
  .r4-side h3 { font-size: clamp(22px, 6vw, 28px); }
  .r4-lead { margin-bottom: 28px; }
}
@media (max-width: 640px) { .r4-stack2 .own-row { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } }

/* the report case: the review page first, two more pages, the rest folded */
.rep-rv { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 24px 44px; align-items: center; }
.rep-tb .r { grid-template-columns: .8fr 1.4fr 1.4fr 1.4fr 124px; gap: 0 18px; padding: 22px 24px; }
.rep-two { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.rep-two li { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: center; }
.rep-two svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: rgba(4,6,10,.55); }
.rep-two svg * { fill: none; stroke: rgba(214,220,232,.5); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rep-two svg .h { stroke: var(--ver); }
.rep-two .t { display: block; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.rep-two .t em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--ink-3); margin-left: .4em; }
.rep-two .x { display: block; margin-top: 6px; font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.rep-more { margin: 40px 0 0; border: 1px solid var(--rule); }
.rep-open { display: flex; align-items: baseline; gap: 12px; padding: 18px 20px; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.rep-open::-webkit-details-marker { display: none; }
.rep-open::marker { content: ""; }
.rep-open:hover { background: rgba(255,255,255,.03); }
.rep-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rep-open .pl { font-family: var(--latin); font-weight: 600; color: var(--ver); }
.rep-open .pl i { font-style: normal; }
.rep-open .pl .m, .rep-more[open] .rep-open .pl .p { display: none; }
.rep-more[open] .rep-open .pl .m { display: inline; }
.rep-open small { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.rep-more[open] .rep-open { border-bottom: 1px solid var(--rule); }
.rep-body { padding: 0 20px 26px; }
.rep-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.rep-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 6px; padding: 14px 0; border-top: 1px solid var(--rule); }
.rep-list li:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
.rep-list .n { grid-row: 1 / span 2; font-family: var(--latin); font-weight: 600; font-size: 14px; line-height: 1.9; letter-spacing: .06em; color: var(--ver); }
.rep-list .t { font-size: 16px; font-weight: 700; line-height: 1.65; color: var(--ink); }
.rep-list .t em { font-style: normal; font-weight: 400; font-size: 14px; color: var(--ink-3); margin-left: .4em; }
.rep-list .x { font-size: 14px; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 960px) { .rep-two { grid-template-columns: 1fr; } .rep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rep-list li:nth-last-child(-n+3) { border-bottom: 0; } .rep-list li:last-child { border-bottom: 1px solid var(--rule); } }
@media (max-width: 640px) {
  .rep-two li { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; }
  .rep-two .t { font-size: 16px; }
  .rep-two .x { font-size: 14px; }
  .rep-open { flex-wrap: wrap; padding: 14px 16px; }
  .rep-open small { flex-basis: 100%; margin-left: 0; }
  .rep-body { padding: 0 14px 20px; }
  .rep-list { grid-template-columns: 1fr; }
  .rep-tb .r { grid-template-columns: .7fr 1.6fr auto; gap: 0 12px; padding: 14px 14px; }
}

/* ⑤ a flat figure: three columns, the material each one weighs stacked from the bottom; vermilion only on 03 */
.ai3 { margin: 56px 0 0; padding: 36px 0 0; border-top: 1px solid var(--rule); }
.ai3 ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.ai3 li { display: grid; grid-template-rows: auto 1fr auto; gap: 0; padding: 0 28px; border-left: 1px solid var(--rule); align-self: stretch; }
.ai3 li:first-child { padding-left: 0; border-left: 0; }
.ai3 li:last-child { padding-right: 0; }
.ai3 .n { font-family: var(--latin); font-weight: 600; font-size: 15px; letter-spacing: .08em; color: var(--ink-3); }
.ai3 .t { display: block; margin: 6px 0 0; font-size: 22px; font-weight: 700; line-height: 1.55; letter-spacing: .02em; color: var(--ink); }
.ai3 .x { display: block; margin: 8px 0 0; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.ai3 .st { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 26px 0 0; min-height: 236px; }
.ai3 .st small { display: block; margin: 0 0 4px; font-size: 14px; letter-spacing: .06em; color: var(--ink-3); }
.ai3 .st span { display: block; padding: 9px 14px; border: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ai3 .st span.me { border-color: var(--ver); color: var(--ver); font-weight: 700; }
.ai3 li:last-child .n { color: var(--ver); }
@media (max-width: 1023px) {
  /* stacked; under each title the material wraps in a row (stacking it would run too long) */
  .ai3 { margin-top: 40px; padding-top: 28px; }
  .ai3 ol { grid-template-columns: 1fr; gap: 28px; }
  .ai3 li, .ai3 li:first-child, .ai3 li:last-child { display: block; padding: 0 0 0; border-left: 0; }
  .ai3 li + li { padding-top: 24px; border-top: 1px solid var(--rule); }
  .ai3 .t { font-size: 19px; }
  .ai3 .st { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; min-height: 0; margin-top: 14px; }
  .ai3 .st small { flex-basis: 100%; margin: 0; }
  .ai3 .st span { padding: 6px 10px; font-size: 14px; }
}
#reach h3[id] { scroll-margin-top: 96px; }
@media (max-width: 960px) { .rep-rv { grid-template-columns: 1fr; } }
/* LP13: columns wide enough for whole phrases */
@media (max-width: 1279px) { .pics { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .rep-cy { grid-template-columns: 1fr; padding-left: 28px; }
  .rep-cy::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .rep-cy li { padding: 0 0 22px; }
  .rep-cy li::before { left: -28px; top: 6px; }
  .rep-nt { grid-template-columns: 1fr; }
  .rep-nt li:nth-last-child(-n+3) { border-bottom: 0; }
  .rep-nt li:last-child { border-bottom: 1px solid var(--rule); }
  .rep-open { flex-wrap: wrap; }
  .rep-open small { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 360px) { .rep-two li { grid-template-columns: 88px minmax(0, 1fr); } }
/* LP14: two lines under ④'s big head; the career under ⑥'s signature; today's date after ⑦'s "あと2社です。" */
.reach-sub { margin: 22px 0 0; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.8; letter-spacing: .04em; color: var(--ink-2) !important; }
.reach-sub .ln { display: block; }
@media (max-width: 799px) { .reach-sub { font-size: 16px; margin-top: 16px; } }
/* LP15: ⑥'s lower half - the illustration on the left, name and career on the right (phones: stacked) */
#who .me { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 0 64px; align-items: center; margin: 80px 0 0; max-width: none; }
#who .me-pic { margin: 0; }
#who .me-pic img { display: block; width: 100%; height: auto; }
#who .me-tx p { margin: 0; }
#who .me-tx p.me-name { margin-top: 10px; }
#who .me-tx p.me-en { margin-top: 14px; }
#who .me-tx p.bio-k { margin: 0 0 20px; }
#who .me-role { font-size: 16px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-2); }
#who .me-name { margin-top: 10px; font-family: var(--serif); font-weight: 700; font-size: 56px; line-height: 1.3; letter-spacing: .2em; color: var(--ink); white-space: nowrap; }
#who .me-en { margin-top: 14px; font-family: var(--latin); font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: .5em; color: var(--ink-2); white-space: nowrap; }
#who .bio { margin: 36px 0 0; padding: 32px 0 0; border-top: 1px solid var(--rule); }
#who .bio-k { margin: 0 0 20px; font-size: 20px; font-weight: 700; letter-spacing: .2em; color: var(--ink); }
#who .bio ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
#who .bio li { position: relative; padding-left: 36px; font-size: 17px; line-height: 1.9; letter-spacing: .03em; color: var(--ink); }
#who .bio li::before { content: ""; position: absolute; left: 0; top: .92em; width: 18px; height: 2px; background: var(--ver); }
@media (min-width: 1024px) { #who .me { grid-column: head-start / body-end !important; grid-row: 5; } }
@media (min-width: 1280px) { #who .me { width: calc(100% + 144px) !important; max-width: none !important; margin-left: -72px; margin-right: -72px; justify-self: start; } }
@media (max-width: 799px) {
  #who .me { grid-template-columns: 1fr; gap: 28px 0; margin-top: 48px; }
  #who .me-pic { margin: 0 -8px; }
  #who .me-name { font-size: 40px; }
  #who .bio li { font-size: 16px; padding-left: 28px; }
  #who .bio li::before { width: 14px; }
}
.asof { display: inline-block; margin-left: .4em; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); white-space: nowrap; vertical-align: .25em; }
.asof:empty { display: none; }
@media (max-width: 799px) { .asof { display: block; margin: 6px 0 0; font-size: 14px; vertical-align: baseline; } .asof:empty { display: none; } }