/* Section six: research. An editorial index rather than cards: the heading on the left, one sentence on the right, then
   long rows (tag, large title, one summary line, reading time). Hover brightens the row and runs a thin red line
   along its bottom. Plain black ground: no image here. */
.s-research { position: relative; display: block; min-height: 0; padding: 160px 0 150px; background: #000; }
.s6wrap { width: min(1240px, calc(100vw - 48px)); margin: 0 auto; }
.s6top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: end; }
.s6lab { display: flex; align-items: center; gap: 14px; font-family: var(--display); font-size: 12px; letter-spacing: .32em; color: rgba(237,237,232,.5); }
.s6lab i { width: 28px; height: 1px; background: rgba(237,237,232,.35); }
.s6head h2 { margin: 24px 0 0; display: flex; flex-direction: column; font-family: var(--display); font-weight: 300; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -.01em; color: #edede8; }
.s6head h2 em { margin-top: 18px; font-style: normal; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; letter-spacing: .005em; color: rgba(237,237,232,.5); }
.s6side { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
.s6side p { margin: 0; font-size: 16.5px; line-height: 1.65; color: rgba(237,237,232,.62); max-width: 30em; }
.s6all { align-self: flex-start; font-size: 15px; color: #edede8; text-decoration: none; border-bottom: 1px solid rgba(237,237,232,.3); padding-bottom: 4px; transition: border-color .3s; }
.s6all:hover { border-color: #edede8; }

.s6list { list-style: none; margin: 72px 0 0; padding: 0; border-top: 1px solid rgba(237,237,232,.12); }
.s6list li { border-bottom: 1px solid rgba(237,237,232,.12); }
.s6list a { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr) 120px 28px; gap: 28px; align-items: baseline; padding: 34px 8px 32px;
  color: #edede8; text-decoration: none; }
.s6list a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: #e8283f; box-shadow: 0 0 10px rgba(232,40,63,.6);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.s6list a:hover::after { transform: scaleX(1); }
.s6tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: rgba(237,237,232,.45); padding-top: 6px; transition: color .4s; }
.s6t { display: flex; flex-direction: column; gap: 10px; }
.s6t b { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.25; letter-spacing: .005em; color: rgba(237,237,232,.82);
  transition: color .4s, transform .6s cubic-bezier(.16,1,.3,1); }
.s6t i { font-style: normal; font-size: 15.5px; line-height: 1.6; color: rgba(237,237,232,.5); max-width: 44em; transition: color .4s; }
.s6m { font-size: 13.5px; color: rgba(237,237,232,.45); text-align: right; }
.s6go { color: rgba(237,237,232,.35); transition: transform .5s cubic-bezier(.16,1,.3,1), color .3s; }
.s6list a:hover .s6t b { color: #edede8; transform: translateX(6px); } .s6list a:hover .s6t i { color: rgba(237,237,232,.7); }
.s6list a:hover .s6tag { color: #e8283f; } .s6list a:hover .s6go { transform: translateX(6px); color: #edede8; }
.s6note { margin-top: 26px; }
.s6note .dtag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: rgba(237,237,232,.4); padding: 3px 10px; border: 1px dashed rgba(237,237,232,.22); border-radius: 4px; }

@media (max-width: 900px) {
  .s6top { grid-template-columns: 1fr; gap: 28px; }
  .s6list a { grid-template-columns: 1fr; gap: 10px; padding: 26px 4px; }
  .s6m { text-align: left; } .s6go { display: none; }
}

/* decode (s6.js): a letter still scrambled keeps its own width but shows a random glyph in a small monospace instead */
.dc { position: relative; }
.dc.scr { color: transparent; }
.dc.scr::after { content: attr(data-c); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font-family: var(--mono); font-size: .62em; font-style: normal;
  font-weight: 400; letter-spacing: 0; color: rgba(237,237,232,.5); pointer-events: none; }
.s6head h2 .dc.scr::after { color: rgba(237,237,232,.42); }
.s6tag .dc.scr::after { font-size: 1em; color: rgba(237,237,232,.3); }