:root{
    --purple:        #442a64;
    --purple-deep:   #341f4e;
    --purple-tint:   #efeaf4;
    --teal:          #3f8076;
    --teal-deep:     #2f6058;
    --teal-tint:     #e7f1ef;
    --paper:         #ffffff;
    --ink:           #241b30;
    --ink-soft:      #5b5265;
    --line:          #e4dfe9;
  }

  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }

  /* ============ TOP BAR (logo only) ============ */
  .topbar{
    display:flex;
    align-items:center;
    padding:36px 56px 8px;
    max-width:1300px;
    margin:0 auto;
  }
  .brand img{ height:34px; width:auto; }

  /* ============ BACK LINK ============ */
  .back{
    max-width:1300px;
    margin:24px auto 0;
    padding:0 56px;
  }
  .back a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--teal-deep);
  }
  .back a svg{ width:14px; height:14px; stroke:var(--teal-deep); transition:transform .15s ease; }
  .back a:hover svg{ transform:translateX(-4px); }

  /* ============ ARTICLE HEADER ============ */
  .article-head{
    max-width:1300px;
    margin:0 auto;
    padding:20px 56px 32px;
  }
  .meta-row{
    display:flex;
    align-items:center;
    gap:14px;
    
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--teal-deep);
    margin-bottom:20px;
  }
  .meta-row .cat{ display:flex; align-items:center; gap:6px; }
  .meta-row .cat svg{ width:9px; height:9px; }
  .meta-row .dot{ color:var(--line); }

  .article-head h1{
    font-size:40px;
    line-height:1.2;
    font-weight:400;
    color:var(--purple);
    margin-bottom:18px;
  }
  .dek{
    font-size:18px;
    line-height:1.6;
    color:var(--ink-soft);
  }

  
  .cover{
    max-width:1300px;
    margin:0 auto 48px;
    padding:0 56px;
  }
  .cover-frame{
    justify-content:space-between;
    display:flex;
    flex-wrap:wrap;
    width:100%;
  }
  .cover-frame > div{
    width:49%;
  }
  .cover-frame > div::last-child{margin-left:auto}
  .cover-sq{ position:absolute; background:rgba(255,255,255,0.12); }
  .cover-sq.a{ width:220px; height:220px; top:-60px; right:-60px; }
  .cover-sq.b{ width:140px; height:140px; bottom:40px; right:120px; background:rgba(255,255,255,0.18); }
  .cover-caption{
    font-size:13px;
    color:var(--ink-soft);
    margin-top:12px;
  }

  /* ============ ARTICLE BODY ============ */
  .article-body{
    max-width:1300px;
    margin:0 auto;
    padding:0 56px 56px;
  }
  
  .prose p{
    font-size:17px;
    line-height:1.75;
    color:var(--ink);
    margin-bottom:24px;
  }
  .prose h2{
    font-size:24px;
    font-weight:400;
    color:var(--purple);
    margin:44px 0 18px;
  }
  .prose ul{
    margin:0 0 24px 20px;
    color:var(--ink);
  }
  .prose li{
    font-size:17px;
    line-height:1.75;
    margin-bottom:10px;
  }

  blockquote{
    border-left:3px solid var(--teal);
    padding:6px 0 6px 28px;
    margin:36px 0;
  }
  blockquote::before{
    content:'”';
    font-size:40px;
    line-height:1;
    color:var(--teal);
    display:block;
    margin-bottom:6px;
  }
  blockquote p{
    font-size:20px;
    line-height:1.5;
    color:var(--purple);
    margin:0;
  }
  blockquote cite{
    display:block;
    font-style:normal;
    font-size:13px;
    color:var(--ink-soft);
    margin-top:12px;
  }

  .tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:40px;
    padding-top:32px;
    border-top:1px solid var(--line);
  }
  .tag{
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:13px;
    color:var(--ink-soft);
  }
  .tag svg{ width:8px; height:8px; }

  /* ============ RELATED ============ */
  .related{
    max-width:1300px;
    margin:0 auto;
    padding:0 56px 80px;
  }
  .related h3{
    
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:24px;
  }
  .related-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:24px;
  }
  .card{
    border:1px solid var(--line);
    border-left:3px solid var(--teal);
    padding:24px;
    display:flex;
    flex-direction:column;
    min-height:180px;
    position:relative;
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }
  .card::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:45%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(63,128,118,0.16), transparent);
    transform:skewX(-18deg);
    transition:left .55s ease;
    pointer-events:none;
  }
  .card:hover::before{ left:130%; }
  .card:hover{
    transform:translateY(-6px);
    border-color:var(--teal);
    box-shadow:0 16px 32px rgba(68,42,100,0.14);
  }
  .card .meta{
    display:flex;
    align-items:center;
    gap:10px;
    
    font-size:11px;
    letter-spacing:0.05em;
    color:var(--teal-deep);
    margin-bottom:12px;
  }
  .card h4{
    font-size:16px;
    line-height:1.4;
    font-weight:400;
    color:var(--purple);
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:720px){
    .topbar, .back, .article-head, .cover, .article-body, .related{ padding-left:24px; padding-right:24px; }
    .article-head h1{ font-size:30px; }
    .related-grid{ grid-template-columns:1fr; }
  }
  
  
  
  /* ============ HERO ============ */
  .hero{
    max-width: 1300px;
    margin: 0 auto;
    padding: 8px 40px 48px 0;
    width: 100%;
    box-sizing: border-box;
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    
    font-size:12px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--teal);
    margin-bottom:18px;
  }
  .eyebrow .mark{ display:flex; }

  .hero h1{
    font-size:44px;
    line-height:1.15;
    font-weight:400;
    color:var(--purple);
    margin-bottom:20px;
  }
  .hero p{
    font-size:16px;
    line-height:1.6;
    color:var(--ink-soft);
    max-width:560px;
    margin-bottom:22px;
  }
  .rule-dot{
    display:flex;
    align-items:center;
    gap:0;
    width:180px;
  }
  .rule-dot .sq{ width:7px; height:7px; background:var(--teal); flex:none; }
  .rule-dot .ln{ height:1px; background:var(--line); flex:1; }

  /* ============ FILTERS ============ */
  .filters{
    max-width:1300px;
    margin:0 auto;
    padding:0 56px 40px;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .filter-pill{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 18px;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:13px;
    color:var(--ink-soft);
    background:var(--paper);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .filter-pill svg{ width:10px; height:10px; }
  .filter-pill:hover{ border-color:var(--teal); color:var(--teal-deep); }
  .filter-pill.is-active{
    background:var(--purple);
    border-color:var(--purple);
    color:#ffffff;
  }

  /* ============ GRID ============ */
  .grid-wrap{
    max-width:1300px;
    margin:0 auto;
    padding:0 56px 40px;
  }

  .news-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:24px;
    margin-bottom:24px;
  }
  .span-2{ grid-column:span 2; }

  .card{
    border:1px solid var(--line);
    padding:32px;
    display:flex;
    flex-direction:column;
    min-height:280px;
    position:relative;
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  }

  /* diagonal light-sweep on hover — the "high-tech" signature interaction */
  .card::before{
    content:"";
    position:absolute;
    top:0; left:-60%;
    width:45%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(63,128,118,0.16), transparent);
    transform:skewX(-18deg);
    transition:left .55s ease;
    pointer-events:none;
    z-index:1;
  }
  .card-feature::before{ background:linear-gradient(115deg, transparent, rgba(255,255,255,0.14), transparent); }
  .card:hover::before{ left:130%; }
  .card-feature > *{position: relative; z-index:2;}
    .card-feature::after{
     position: absolute;
     background:rgb(68 42 101 / 83%);
     top:0;
     content:'';
     display:block;
     left:0; right:0;
     bottom:0;
     z-index:1;   
    }
  .card:hover{
    transform:translateY(-6px);
    border-color:var(--teal);
    box-shadow:0 16px 32px rgba(68,42,100,0.14);
  }
  .card-feature:hover{ border-color:var(--purple); }
  .card:hover .meta .idx{ color:var(--teal-deep); }
  .card-feature:hover .meta .idx{ color:rgba(255,255,255,0.85); }

  .card-feature{
    background:var(--purple);
    color:#ffffff;
    position:relative;
    overflow:hidden;
  }
  .card-feature .meta{ color:rgba(255,255,255,0.68); }
  .card-feature h2{ color:#ffffff; }
  .card-feature p{ color:rgba(255,255,255,0.82); }
  .card-feature .read{ color:#ffffff; }
  .card-feature .read svg{ stroke:#ffffff; }

  .card-art{
    background:var(--teal);
    border-color:var(--teal);
    position:relative;
    overflow:hidden;
    min-height:280px;
  }
  .art-sq{ position:absolute; transition:transform .35s ease; }
  .art-sq.a{ width:120px; height:120px; background:rgba(255,255,255,0.14); top:34px; left:34px; }
  .art-sq.b{ width:96px; height:96px; background:rgba(255,255,255,0.22); top:78px; left:78px; }
  .art-sq.c{ width:64px; height:64px; background:rgba(255,255,255,0.30); top:118px; left:118px; }
  .card-art:hover .art-sq.a{ transform:translate(-6px,-6px); }
  .card-art:hover .art-sq.b{ transform:translate(3px,3px); }
  .card-art:hover .art-sq.c{ transform:translate(10px,10px); }

  .card > .meta,
  .card > h2,
  .card > p,
  .card > .read,
  .card .art-sq{
    position:relative;
    z-index:2;
  }

  .meta{
    display:flex;
    align-items:center;
    gap:14px;
    
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--teal-deep);
    margin-bottom:16px;
  }
  .meta .idx{ color:var(--ink-soft); }
  .meta .cat{ display:flex; align-items:center; gap:6px; }
  .meta .cat svg{ width:9px; height:9px; }

  .card h2{
    font-size:22px;
    line-height:1.3;
    font-weight:400;
    color:var(--purple);
    margin-bottom:12px;
  }
  .card.card-feature h2{color:#fff}
  .card p{
    font-size:14px;
    line-height:1.6;
    
    flex:1;
    margin-bottom:20px;
  }
  .read{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--teal-deep);
    width:fit-content;
  }
  .read svg{ width:14px; height:14px; stroke:var(--teal-deep); transition:transform .15s ease; }
  .card:hover .read svg{ transform:translateX(4px); }

  .card-accent{ border-left:3px solid var(--teal); }

  /* ============ LOAD MORE ============ */
  .loadmore{
    display:flex;
    justify-content:center;
    padding:8px 0 80px;
  }
  .loadmore button{
    
    font-size:13px;
    letter-spacing:0.04em;
    color:var(--purple);
    background:none;
    border:1px solid var(--purple);
    padding:14px 34px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .loadmore button:hover{ background:var(--purple); color:#ffffff; }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1350px){
    .hero{padding-left:40px}
  }
  @media (max-width:900px){
    .topbar, .hero, .filters, .grid-wrap{ padding-left:24px; padding-right:24px; }
    .hero h1{ font-size:32px; }
    .news-grid{ grid-template-columns:1fr; }
    .span-2{ grid-column:span 1; }
    .cover-frame > div{width:100%;margin:5px 0;}
  }