:root{
    --ink:#16262a;
    --ink-soft:#4a5c60;
    --teal-deep:#2e3191;
    --teal:#4649b0;
    --teal-mist:#eaeafa;
    --paper:#f8f7f3;
    --card:#ffffff;
    --line:#e0e0ec;
    --amber:#ed2a31;
    --amber-deep:#c81f26;
    --radius:6px;
    --max:1120px;
  }
 
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
  }
  h1,h2,h3,.serif{
    font-family:'Inter',sans-serif;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
 
  .wrap{
    max-width:var(--max);
    margin:0 auto;
    padding:0 24px;
  }
 
  /* ---------- Header ---------- */
  .page-head{
    padding:76px 0 56px;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(600px 240px at 85% -40px, var(--teal-mist), transparent 70%),
      var(--paper);
  }
  .page-head .eyebrow-line{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
  }
  .page-head .eyebrow-line span{
    font-size:14px;
    color:var(--teal-deep);
    font-weight:600;
  }
  .page-head .eyebrow-line .rule{
    height:1px;
    width:40px;
    background:var(--amber);
  }
  .page-head h1{
    font-size:clamp(32px,4.4vw,48px);
    font-weight:600;
    line-height:1.15;
    margin:0 0 18px;
    max-width:14ch;
    color:var(--teal-deep);
  }
  .page-head p{
    max-width:56ch;
    font-size:17px;
    color:var(--ink-soft);
    margin:0;
  }
 
  /* ---------- Story block ---------- */
  .story{
    padding:72px 0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:320px 1fr;
    gap:56px;
    align-items:start;
  }
  .story.reverse{
    grid-template-columns:1fr 320px;
  }
  .story.reverse .story-media{order:2;}
  .story.reverse .story-content{order:1;}
 
  .story-media{
    position:sticky;
    top:32px;
  }
  .video-frame{
    position:relative;
    width:100%;
    aspect-ratio:9/9;
    background:#0d1e1c;
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
  }
  .video-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
  }
  .media-caption{
    margin-top:14px;
    font-size:13px;
    color:var(--ink-soft);
  }
  .media-caption strong{
    color:var(--ink);
    font-weight:600;
  }
 
  .story-content .tag{
    font-size:13px;
    font-weight:600;
    color:var(--amber-deep);
    margin:0 0 10px;
  }
  .story-content h2{
    font-size:clamp(22px,2.6vw,28px);
    font-weight:600;
    line-height:1.28;
    margin:0 0 20px;
    /*max-width:22ch;*/
    color:var(--ink);
  }
  .story-content p{
    font-size:16px;
    color:var(--ink-soft);
    /*max-width:62ch;*/
    margin:0 0 16px;
  }
 
  blockquote{
    position:relative;
    margin:26px 0 24px;
    padding:4px 0 4px 24px;
    border-left:3px solid var(--teal);
    /*max-width:58ch;*/
  }
  blockquote::before{
    content:"\201C";
    position:absolute;
    left:-2px;
    top:-24px;
    font-family:'Inter',sans-serif;
    font-size:64px;
    font-weight:700;
    line-height:1;
    color:var(--teal-mist);
    z-index:0;
  }
  blockquote p{
    position:relative;
    z-index:1;
  }
  blockquote p{
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:18px;
    line-height:1.5;
    color:var(--teal-deep);
    margin:0;
  }
  blockquote .bq-heading{
    font-style:normal;
    font-weight:600;
    font-size:15px;
    line-height:1.4;
    color:gray;
    margin:0 0 10px;
  }
  blockquote cite{
    display:block;
    margin-top:10px;
    font-family:'Inter',sans-serif;
    font-style:normal;
    font-size:13px;
    font-weight:600;
    color:var(--ink-soft);
  }
 
  .read-more{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:8px;
    padding:12px 22px;
    background:#151516;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:600;
    border-radius:var(--radius);
    transition:background .18s ease;
  }
  .read-more:hover{background:var(--teal); color:#fff;}
  .read-more svg{width:15px;height:15px;flex-shrink:0;}
 
  /* ---------- Closing strip ---------- */
  .closing{
    padding:60px 0 80px;
    text-align:center;
  }
  .closing p{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:20px;
    color:var(--ink);
    max-width:38ch;
    margin:0 auto 24px;
  }
  .closing .read-more{
    background:var(--amber);
  }
  .closing .read-more:hover{background:var(--amber-deep); color:#fff;}
 
  @media (max-width:820px){
    .story, .story.reverse{
      grid-template-columns:1fr;
      gap:28px;
      padding:52px 0;
    }
    .story.reverse .story-media,.story.reverse .story-content{order:initial;}
    .story-content{display:contents;}
    .story-content .tag{order:1;}
    .story-content h2{order:1;}
    .story-media{order:2;}
    .story-content p{order:3;}
    .story-content blockquote{order:3;}
    .story-content .read-more{order:4;}
    .story-media{
      position:static;
      max-width:100%;
      width:100%;
    }
    .video-frame{
      max-width:100%;
      margin:0 auto;
    }
    .page-head{padding:56px 0 40px;}
    .wrap{padding:0 20px;}
    blockquote{
      padding-left:18px;
      max-width:100%;
    }
    blockquote::before{
      font-size:44px;
      top:-18px;
      left:-2px;
    }
    .read-more{width:100%;justify-content:center;}
  }
 
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .read-more{transition:none;}
  }
 
  :focus-visible{
    outline:2px solid var(--teal-deep);
    outline-offset:2px;
  }