/* VAIY - insights page styles. Foundations live in brand.css */

/* page container - overrides the wide default in brand.css */
.wrap{ max-width:1000px; margin:0 auto; padding:0 32px; }

a{ color:inherit; }
@media (max-width:640px){ .wrap{ padding:0 22px; } }
header{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:64px; }
/* nav styling, including the mobile panel, lives in brand.css */
.btn{
    font-size:14px; font-weight:500; text-decoration:none; padding:9px 17px;
    border-radius:99px; background:var(--accent); color:#fff; white-space:nowrap;
  }
.btn:hover{ opacity:.82; }
.masthead{ padding:80px 0 0; }
@media (max-width:640px){ .masthead{ padding:52px 0 0; } }
h1{ font-family:'Sora',system-ui,sans-serif;
    margin:0; font-weight:600; letter-spacing:-0.04em; line-height:1.0;
    font-size:clamp(40px, 7vw, 82px);
  }
.lede{ margin:26px 0 0; font-size:clamp(16px,1.9vw,19px); color:var(--mute); max-width:52ch; line-height:1.55; }
.kicker{
    font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--accent); margin:0 0 24px;
  }
.filters{
    display:flex; gap:9px; flex-wrap:wrap; margin:48px 0 0;
    padding-bottom:32px; border-bottom:1px solid var(--line);
  }
.filters button{
    font:inherit; font-size:13.5px; font-weight:500; cursor:pointer;
    background:transparent; color:var(--mute);
    border:1px solid var(--line); border-radius:99px; padding:8px 16px;
    transition:color .12s ease, background .12s ease, border-color .12s ease;
    display:inline-flex; align-items:center; min-height:44px;
  }
.filters button:hover{ color:var(--ink); border-color:var(--mute); }
.filters button[aria-pressed="true"]{
    background:var(--accent); color:#fff; border-color:var(--accent);
  }
.filters button .c{ opacity:.55; font-variant-numeric:tabular-nums; margin-left:5px; }
.posts{ margin:0 0 0; }
.post{
    display:grid; grid-template-columns:1fr; gap:10px;
    padding:36px 0; border-bottom:1px solid var(--line);
    text-decoration:none; color:inherit;
  }
@media (min-width:760px){
    .post{ grid-template-columns:118px 1fr; gap:40px; align-items:start; }
  }
.post:hover h2{ color:var(--accent); }
.post .date{
    font-size:13px; color:var(--mute); font-variant-numeric:tabular-nums;
    letter-spacing:0.02em; padding-top:5px;
  }
.post h2{ font-family:'Sora',system-ui,sans-serif;
    margin:0; font-size:clamp(21px,2.5vw,28px); font-weight:600;
    letter-spacing:-0.025em; line-height:1.2; max-width:26ch;
    transition:color .12s ease;
  }
.post .ex{ margin:12px 0 0; font-size:15.5px; color:var(--mute); line-height:1.6; max-width:60ch; }
.tags{ display:flex; gap:7px; flex-wrap:wrap; margin-top:16px; }
.tag{
    font-size:11.5px; font-weight:500; letter-spacing:0.05em;
    padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--mute);
    white-space:nowrap;
  }
.tag.is-case{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.post[hidden]{ display:none; }
.empty{ padding:60px 0; color:var(--mute); font-size:16px; }
.post.draft{ opacity:.72; }
.post.draft h2::after{
    content:'Draft'; font-size:10.5px; font-weight:600; letter-spacing:0.09em;
    text-transform:uppercase; color:var(--accent); vertical-align:middle;
    border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
    padding:3px 8px; border-radius:3px; margin-left:12px;
  }
.howto{
    margin:56px 0 0; padding:26px 28px; background:var(--panel);
    border-left:2px solid var(--accent); font-size:14.5px; color:var(--mute); line-height:1.65;
  }
.howto b{ color:var(--ink); font-weight:600; }
.howto code{ font-size:13px; background:color-mix(in srgb, var(--ink) 8%, transparent); padding:2px 5px; border-radius:3px; }
footer{
    padding:30px 0 60px; margin-top:56px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
    font-size:13px; color:var(--mute);
  }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--ink); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
.skip{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--accent); color:#fff; padding:12px 20px;
    font-size:14px; font-weight:600; text-decoration:none;
  }
.skip:focus{ left:0; }