/* INSIGHTS · journal index + article reader. Built on the shared token system. */

/* shared bits */
.ins-cat{ font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--accent-text); }
.ins-by{ font-family:var(--mono); font-size:12px; letter-spacing:.4px; color:var(--muted); }
.ins-tag{ font-family:var(--mono); font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent-text); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); border-radius:999px; padding:3px 9px; margin-left:14px; vertical-align:middle; }

/* ---- FEATURED ---- */
.ins-feat{ padding:44px 64px 8px; }
.ins-feat-in{ display:block; border-top:1px solid var(--ink); padding-top:44px; transition:opacity .3s; }
.ins-feat-meta{ display:flex; align-items:center; gap:14px; }
.ins-dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); }
.ins-mn{ font-family:var(--mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted); }
.ins-feat-t{ font-family:var(--serif); font-weight:700; font-size:56px; line-height:1.04; letter-spacing:-2.2px; color:var(--ink); margin:22px 0 0; max-width:20ch; transition:color .3s var(--ease); }
.ins-feat-d{ font-family:var(--sans); font-weight:400; font-size:21px; line-height:1.5; color:var(--ink-soft); margin:22px 0 0; max-width:60ch; }
.ins-feat-in .ins-by{ margin-top:26px; }
.ins-more{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-size:15px; font-weight:600; color:var(--accent-text); }
.ins-more .ar{ transition:transform .3s var(--ease); }
.ins-feat-in:hover .ins-feat-t{ color:var(--accent-text); }
.ins-feat-in:hover .ins-more .ar{ transform:translateX(6px); }

/* ---- LIST ---- */
.ins-list{ padding:72px 64px 40px; }
.ins-rows{ margin-top:22px; }
.ins-row{ display:grid; grid-template-columns:190px 1fr 46px; gap:32px; align-items:start; padding:34px 0; border-top:1px solid var(--rule); transition:border-color .3s; }
.ins-rows .ins-row:last-child{ border-bottom:1px solid var(--rule); }
.ins-row-cat{ padding-top:6px; }
.ins-row-t{ font-family:var(--serif); font-weight:700; font-size:30px; line-height:1.12; letter-spacing:-1.1px; color:var(--ink); transition:color .3s var(--ease); }
.ins-row-d{ font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.55; color:var(--ink-soft); margin-top:12px; max-width:64ch; }
.ins-row .ins-by{ margin-top:16px; }
.ins-row-ar{ display:flex; justify-content:flex-end; padding-top:8px; color:var(--muted); font-size:22px; }
.ins-row-ar .ar{ display:inline-block; transition:transform .3s var(--ease), color .3s; }
.ins-row:hover{ border-top-color:var(--ink); }
.ins-row:hover .ins-row-t{ color:var(--accent-text); }
.ins-row:hover .ins-row-ar{ color:var(--accent-text); }
.ins-row:hover .ins-row-ar .ar{ transform:translateX(6px); }

/* ---- ARTICLE ---- */
.art{ padding:150px 64px 30px; }
.art-wrap{ max-width:760px; margin:0 auto; }
.art-back{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.art-back:hover{ color:var(--accent-text); }
.art-head{ margin-top:40px; }
.art-meta{ display:flex; align-items:center; gap:0; }
.art-meta .ins-tag{ margin-left:14px; }
.art-title{ font-family:var(--serif); font-weight:700; font-size:52px; line-height:1.05; letter-spacing:-2.2px; color:var(--ink); margin:22px 0 0; }
.art-dek{ font-family:var(--sans); font-weight:400; font-size:22px; line-height:1.5; color:var(--ink-soft); margin:24px 0 0; }
.art-by{ font-family:var(--mono); font-size:12px; letter-spacing:.5px; color:var(--muted); margin-top:28px; }
.art-rule{ height:1px; background:var(--rule); margin:44px 0 0; }

.art-body{ margin-top:44px; }
.art-p{ font-family:var(--sans); font-weight:400; font-size:19px; line-height:1.72; color:var(--ink); margin:0 0 26px; }
.art-h{ font-family:var(--serif); font-weight:600; font-size:25px; letter-spacing:-.6px; color:var(--ink); margin:44px 0 18px; }
.art-q{ margin:38px 0; padding-left:26px; border-left:2px solid var(--accent); }
.art-q span{ display:block; font-family:var(--serif); font-weight:400; font-style:italic; font-size:26px; line-height:1.35; letter-spacing:-.5px; color:var(--ink); }
.art-q cite{ display:block; font-family:var(--mono); font-style:normal; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.art-l{ list-style:none; margin:0 0 26px; padding:0; }
.art-l li{ position:relative; font-family:var(--sans); font-size:19px; line-height:1.6; color:var(--ink); padding:0 0 14px 26px; }
.art-l li::before{ content:""; position:absolute; left:2px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); }

.art-sign{ margin-top:44px; padding-top:26px; border-top:1px solid var(--rule); }
.art-sign-name{ font-family:var(--serif); font-weight:400; font-size:24px; letter-spacing:-.4px; color:var(--ink); }
.art-sign-role{ font-family:var(--mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-top:8px; }

/* ---- responsive ---- */
@media (max-width:860px){
  .ins-feat,.ins-list{ padding-left:22px !important; padding-right:22px !important; }
  .art{ padding-left:22px !important; padding-right:22px !important; padding-top:110px !important; }
  .ins-feat-t{ font-size:34px; letter-spacing:-1.2px; }
  .ins-feat-d{ font-size:18px; }
  .ins-row{ grid-template-columns:1fr; gap:10px; padding:26px 0; }
  .ins-row-cat{ padding-top:0; }
  .ins-row-ar{ display:none; }
  .ins-row-t{ font-size:24px; letter-spacing:-.7px; }
  .art-title{ font-size:34px; letter-spacing:-1.2px; }
  .art-dek{ font-size:19px; }
  .art-p,.art-l li{ font-size:18px; }
  .art-q span{ font-size:22px; }
}