/* Fenori research pages: page-specific styles. Chrome comes from /site.css. */

/* ============ Research index ============ */

/* The list opens close under the hero: it is the page's subject, not a later section. */
section.quiet .wrap { padding-top: clamp(52px, 6.5vw, 92px); }

ul.rlist { list-style: none; margin: 0; padding: 0; max-width: 980px; }
ul.rlist li + li { border-top: 1px solid rgba(18,18,20,.10); }
ul.rlist a { display: grid; grid-template-columns: 104px 1fr; gap: 10px 24px; align-items: start; padding: clamp(30px, 3.8vw, 46px) 0; text-decoration: none; }
ul.rlist .rmeta { display: flex; flex-direction: column; gap: 9px; padding-top: clamp(4px, .7vw, 10px); }
ul.rlist .rkey { font: 500 12px/1.5 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #6E6E76; }
ul.rlist .rdate { font: 400 13px/1.5 Inter, sans-serif; color: #6E6E76; }
ul.rlist .rti { display: block; font: 600 clamp(21px, 2.4vw, 30px)/1.18 'Inter Tight', Inter, sans-serif; letter-spacing: -.02em; color: #121214; max-width: 36ch; text-wrap: balance; }
ul.rlist .rdesc { display: block; margin-top: 12px; font: 400 15.5px/1.65 Inter, sans-serif; color: #52525B; max-width: 62ch; text-wrap: pretty; }
ul.rlist a:hover .rti { color: #0E6B48; }
@media (hover: hover) and (pointer: fine) {
  ul.rlist .rti { transition: transform .2s cubic-bezier(.23,1,.32,1), color .2s ease; }
  ul.rlist a:hover .rti { transform: translateX(4px); }
}
/* Entrance: the same grammar as the site's reveals (opacity + 16px rise, expo-out, 70ms stagger). */
@media (prefers-reduced-motion: no-preference) {
  ul.rlist li { animation: rlist-rise .7s cubic-bezier(.16,1,.3,1) backwards; }
  ul.rlist li:nth-child(2) { animation-delay: .07s; }
  ul.rlist li:nth-child(3) { animation-delay: .14s; }
}
@keyframes rlist-rise { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 720px) {
  ul.rlist a { grid-template-columns: 1fr; gap: 6px; }
  ul.rlist .rmeta { flex-direction: row; align-items: baseline; gap: 14px; padding-top: 0; }
}

/* Centered closing invitation (same family as the homepage finale) */
section.finale { border-top: 1px solid rgba(18,18,20,.1); }
section.finale .wrap { padding-top: clamp(88px, 11vw, 150px); padding-bottom: clamp(88px, 11vw, 150px); display: flex; flex-direction: column; align-items: center; text-align: center; }
section.finale .statement { max-width: 18ch; }
section.finale p.sub { margin: 20px 0 0; font: 400 clamp(15px, 1.2vw, 18px)/1.7 Inter, sans-serif; color: #52525B; max-width: 52ch; }
section.finale .btn-pill { margin-top: 36px; }

/* ============ Articles ============ */

article { max-width: 780px; margin: 0 auto; padding: clamp(64px, 9vh, 118px) clamp(24px, 5vw, 72px) clamp(80px, 10vw, 150px); }

/* The section label links back to the index; the hit area stays on the word itself. */
article a.kicker { display: inline-block; text-decoration: none; }
article a.kicker:hover { color: #0E6B48; }

article h1 { font: 600 clamp(31px, 3.75vw, 48px)/1.08 'Inter Tight', Inter, sans-serif; letter-spacing: -.026em; max-width: 26ch; text-wrap: balance; }

article .meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 26px 0 0; padding-bottom: 34px; border-bottom: 1px solid rgba(18,18,20,.10); }
article .meta .rkey { font: 500 12px/1.6 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #6E6E76; }
article .meta .msrc { font: 400 13px/1.6 Inter, sans-serif; color: #6E6E76; }
article .meta .rcat { font: 500 12px/1.6 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #A1A1AA; }

article p { font: 400 18px/1.75 Newsreader, Georgia, serif; color: #3F3F46; margin: 1.4em 0; max-width: 68ch; text-wrap: pretty; }

/* Abstract drop: the opening paragraph reads one step larger, as a journal lede. */
article .meta + p { margin-top: 38px; font: 400 clamp(19px, 1.55vw, 21px)/1.62 Newsreader, Georgia, serif; color: #27272A; max-width: 58ch; }

article h2 { margin: 2.4em 0 .55em; font: 600 clamp(21px, 2.3vw, 27px)/1.22 'Inter Tight', Inter, sans-serif; letter-spacing: -.02em; color: #121214; max-width: 32ch; text-wrap: balance; }

article blockquote { margin: 2.6em 0; padding: 0 0 0 28px; border-left: 1px solid rgba(18,18,20,.22); }
article blockquote p { margin: 0; font: 300 clamp(21px, 2.2vw, 27px)/1.4 Newsreader, Georgia, serif; font-style: italic; color: #121214; max-width: 30ch; }

/* Diagram panel: dark 16px figure, plain sentence caption */
figure.diag { margin: 2.6em 0; }
.diag .dpanel { background: #121214; border-radius: 16px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 28px; }
.diag .dtest + .dtest { border-top: 1px solid rgba(250,250,250,.12); padding-top: 28px; }
.diag .dlab { display: block; font: 600 12px/1.5 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #A1A1AA; margin-bottom: 14px; }
.diag .dflow { display: flex; align-items: center; gap: 14px; }
.diag .dgroup { display: grid; gap: 10px; flex: 0 1 250px; }
.diag .dnode { display: block; border: 1px solid rgba(250,250,250,.22); border-radius: 8px; background: #1A1A1E; padding: 12px 16px; font: 500 13.5px/1.35 Inter, sans-serif; color: #FAFAFA; flex: 0 1 250px; }
.diag .dnode small { display: block; margin-top: 4px; font: 400 12px/1.45 Inter, sans-serif; color: #A1A1AA; }
.diag .dnode.dout { background: #FAFAFA; border-color: #FAFAFA; color: #121214; }
.diag .dnode.dout small { color: #52525B; }
.diag .darr { flex: 0 0 auto; font: 400 16px/1 Inter, sans-serif; color: #A1A1AA; }
@media (max-width: 600px) {
  .diag .dflow { flex-direction: column; align-items: stretch; gap: 10px; }
  .diag .dgroup, .diag .dnode { flex: 1 1 auto; }
  .diag .darr { transform: rotate(90deg); align-self: flex-start; margin: 2px 0 2px 8px; }
}
figure.diag figcaption { margin-top: 12px; font: 400 13px/1.6 Inter, sans-serif; color: #6E6E76; max-width: 62ch; }

/* End of article invitation */
article .cta { margin-top: clamp(56px, 7vw, 92px); border-top: 1px solid rgba(18,18,20,.10); padding-top: 38px; }
article .cta p { margin: 0 0 26px; font: 400 16px/1.7 Inter, sans-serif; color: #52525B; max-width: 54ch; }