/* Platinova — Notes system in the Mugen articles pattern.
   Layout, spacing, heading scale and hover interactions follow mugenstudio.framer.website/articles;
   colors, fonts and easing stay 100% Platinova (site.css tokens, no new hues). */

/* ---------- split section header (label left · content right) ---------- */
.asplit{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.asplit .albl{font-family:var(--ui);font-size:15px;color:#b5b5b5;padding-top:14px}
.asplit .albl b{color:var(--fg);font-weight:600}
.ahead h2,.ahead h1{font-size:clamp(44px,6.4vw,92px);font-weight:600;letter-spacing:-2.5px;line-height:1.02}
.ahead .serif{font-weight:500}
.ahead .intro{color:#b5b5b5;font-weight:300;font-size:17px;line-height:1.6;max-width:460px;margin-top:30px}
@media(max-width:900px){.asplit{grid-template-columns:1fr}.asplit .albl{padding-top:0}}

/* ---------- search + filter row ---------- */
.afilter{display:flex;gap:12px;margin:56px 0 0;flex-wrap:wrap}
.afilter input,.afilter select{background:#101010;border:1px solid var(--line2);border-radius:10px;
  color:var(--fg);font-family:var(--ui);font-size:14px;padding:13px 16px;outline:none}
/* native select arrow sits inside the padding box, so the label collides with it —
   own chevron + a reserved right gutter. */
.afilter select{
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:42px}
.afilter input{width:220px}
.afilter input:focus,.afilter select:focus{border-color:rgba(255,255,255,.35)}

/* ---------- article card (hover reveals excerpt + author) ---------- */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
@media(max-width:960px){.agrid{grid-template-columns:1fr}}
.acard{position:relative;border-radius:14px;overflow:hidden;min-height:520px;display:flex;flex-direction:column;
  padding:22px 24px;background:#0b0b0b;isolation:isolate}
.acard img.cover{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.85;
  transition:opacity .55s ease,transform 1.1s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.acard::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.78),rgba(5,5,5,.18) 42%,rgba(5,5,5,.5));
  transition:background .55s ease}
.acard:hover img.cover{opacity:.08;transform:scale(1.035)}
.acard>*{position:relative;z-index:2}
.acard .atop{display:flex;gap:14px;font-family:var(--ui);font-size:13px;margin-bottom:14px}
.acard .atop .cat{color:#e5e5e5;font-weight:600}
.acard .atop .date{color:#9a9a9a}
.acard h3{font-size:clamp(25px,2.2vw,31px);font-weight:600;letter-spacing:-1px;line-height:1.16;margin:0}
.acard .plus{position:absolute;bottom:20px;right:22px;z-index:2;width:20px;height:20px;stroke:#ddd;fill:none;stroke-width:1.6;
  transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.acard:hover .plus{opacity:0;transform:rotate(90deg)}
.acard .areveal{margin-top:auto;opacity:0;transform:translateY(20px);
  transition:opacity .5s ease .06s,transform .55s cubic-bezier(.22,1,.36,1) .06s}
.acard:hover .areveal{opacity:1;transform:none}
.acard .read{font-family:var(--ui);font-size:14px;color:#b5b5b5;margin-bottom:12px}
.acard .ex{color:#d5d5d5;font-weight:300;font-size:14.5px;line-height:1.55;margin-bottom:18px}
.acard .who{display:flex;align-items:center;gap:12px;font-family:var(--ui);font-size:13.5px}
.acard .who .av{width:38px;height:38px;border-radius:8px;background:#1a1a1a;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:600;color:#e0e0e0;flex:0 0 38px}
img.av{object-fit:cover;filter:grayscale(1);padding:0}
.acard .who b{display:block;color:#e5e5e5;font-weight:600}
.acard .who span{color:#9a9a9a}
.acard .who .arr{margin-left:auto;width:18px;height:18px;stroke:#ddd;fill:none;stroke-width:1.6}

/* homepage variant: all-articles link row */
.aall{display:flex;justify-content:flex-end;margin-top:44px;font-family:var(--ui);font-size:16px}
.aall a{display:inline-flex;align-items:center;gap:10px;color:var(--fg);border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .3s}
.aall a:hover{color:#b5b5b5}
.aall .n{color:var(--dim)}
.aall svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- article detail (left rail · right content) ---------- */
.dwrap{max-width:var(--maxw);margin:0 auto;padding:120px var(--gutter) 0;display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:start}
@media(max-width:960px){.dwrap{grid-template-columns:1fr;padding-top:96px}}
.dleft{will-change:transform}
.dleft img.hero{width:100%;border-radius:14px;filter:grayscale(1)}
.dleft .morelbl{display:flex;justify-content:space-between;align-items:baseline;margin:70px 0 8px;
  font-family:var(--ui);font-size:15px;color:#b5b5b5}
.dleft .morelbl b{color:var(--fg);font-weight:600;font-size:22px;letter-spacing:-.5px}
.dleft .morelbl .n{color:var(--dim)}
.dleft .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:14px;color:#b5b5b5;
  border-bottom:1px solid var(--line2);padding-bottom:3px;margin-bottom:26px;transition:color .3s}
.dleft .back:hover{color:var(--fg)}
.dleft .acard{min-height:430px;margin-bottom:26px}
@media(max-width:960px){.dleft .morelbl{margin-top:44px}}

.dright h1{font-size:clamp(42px,5.6vw,84px);font-weight:600;letter-spacing:-2.5px;line-height:1.03}
.dright h1 .serif{font-weight:500}
.scrollcue{font-family:var(--ui);font-size:15px;color:#b5b5b5;margin:44px 0 60px;text-align:right}
.scrollcue .p{color:var(--fg);animation:cuepulse 1.8s ease-in-out infinite;display:inline-block}
@keyframes cuepulse{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.dmeta{border-top:1px solid var(--line2);padding-top:40px;margin-bottom:70px}
.dmeta .read{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-1px}
.dmeta .cd{display:flex;gap:18px;font-family:var(--ui);font-size:14px;margin:18px 0 22px}
.dmeta .cd .cat{color:#e5e5e5;font-weight:600}
.dmeta .cd .date{color:#9a9a9a}
.dmeta .deck{color:#b5b5b5;font-weight:300;font-size:17.5px;line-height:1.6;max-width:560px}
.dmeta .who{display:flex;align-items:center;gap:14px;margin-top:30px;font-family:var(--ui);font-size:14px}
.dmeta .who .av{width:46px;height:46px;border-radius:10px;background:#1a1a1a;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:600;color:#e0e0e0}
.dmeta .who b{display:block;color:#e5e5e5;font-weight:600}
.dmeta .who span{color:#9a9a9a}
.dmeta .who a{color:#b5b5b5;border-bottom:1px solid var(--line);transition:color .3s}
.dmeta .who a:hover{color:var(--fg)}
/* the body itself stays note.css's .art — only its container position changes */
.dright .art{max-width:640px;margin:0;padding:0}

/* accessibility: visible keyboard focus + reduced motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #cfcfcf;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  .rise,.rv{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .track,.chev,.scroll-btn svg,.scrollcue .p{animation:none!important}
  html{scroll-behavior:auto}
}

/* goldtext-accent */
.dright h1 .serif,.lmain h1 .serif{background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}

/* §TOOLS — end-of-article action block. Free tools suggested per article so a
   read ends in a step, not a scroll. Used by lessons/* and notes/*. */
.atools{max-width:var(--maxw);margin:70px auto 0;padding:0 var(--gutter)}
.atools .box{border-top:1px solid var(--line2);padding-top:38px;max-width:900px}
.atools .lbl{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.atools .say{color:#b5b5b5;font-weight:300;font-size:16px;line-height:1.6;margin:10px 0 22px;max-width:520px}
.atools .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.atools .tc{display:block;border:1px solid var(--line2);border-radius:14px;padding:22px 22px 20px;background:#0b0b0b;
  transition:border-color .3s,background .3s,transform .3s}
.atools .tc:hover{border-color:rgba(247,211,137,.35);background:#101010;transform:translateY(-3px)}
.atools .tc .n{font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.atools .tc h3{font-size:19px;font-weight:600;letter-spacing:-.4px;color:#ededed;margin:8px 0 8px}
.atools .tc p{color:#9a9a9a;font-weight:300;font-size:14px;line-height:1.55;margin:0 0 14px}
.atools .tc .go{font-family:var(--ui);font-size:13.5px;color:#d8d8d8;display:inline-flex;align-items:center;gap:7px}
.atools .tc:hover .go{color:var(--goldlite)}
.atools .tc .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .3s}
.atools .tc:hover .go svg{transform:translateX(4px)}
.atools .all{display:inline-block;margin-top:20px;font-family:var(--ui);font-size:13.5px;color:#9a9a9a;
  border-bottom:1px solid var(--line);transition:color .3s}
.atools .all:hover{color:var(--fg)}