@font-face{
      font-family:'Montserrat';
      font-style:normal;
      font-weight:700;
      src:url('fonts/montserrat-v25-latin-700.woff2') format('woff2'),
          url('fonts/montserrat-v25-latin-700.woff') format('woff');
      font-display:swap;
    }
    @font-face{
      font-family:'NotoSerifSC';
      font-style:normal;
      font-weight:400;
      src:url('fonts/noto-serif-sc-v12-chinese-simplified-regular.woff2') format('woff2'),
          url('fonts/noto-serif-sc-v12-chinese-simplified-regular.woff') format('woff');
      font-display:swap;
    }




   
    html {
      background: url("img/background-pattern.jpg") center/cover fixed no-repeat;
    }



    body{

      font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-size:100%;         
      color:#333333;
      line-height:1.8;        
      max-width:1100px;
      margin:0 auto;
      padding:2em 1.25em;
      background:rgba(255,255,255,.92);
    }


    h1, h2, h3{
      font-family:'NotoSerifSC', sans-serif;
      line-height:1.3;
      margin:0 0 .6em 0;
    }

    h1{
      font-size:2.6em;             
      color:#2E3A59;
      text-align:center;
      border-bottom:3px solid #4A90E2;
      padding-bottom:.35em;
      margin-bottom:1em;
    }

    h2{
      font-size:1.9em;
      color:#2E3A59;
      margin-top:1.6em;
    }

    h3{
      font-size:1.35em;
      color:#4A90E2;
      margin-top:1.2em;
    }

    p{
      font-size:16px;              
      margin:.4em 0 1em;
    }

    .card{
      background:#fff;
      border:1px solid #eaeaea;
      border-radius:14px;
      padding:1.25em 1.25em .5em;
      box-shadow:0 2px 12px rgba(0,0,0,.04);
      margin-top:1em;
    }

    .hint{
      font-size:.95em;
      background:#F5F7FB;
      border-left:4px solid #4A90E2;
      padding:.9em 1em;
      border-radius:8px;
      margin:.5em 0 1em;
    }

    .wf-grid{
      display:grid;
      gap:1.25em;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      margin-top:1em;
    }

    figure{
      margin:0;
      background:#fff;
      border:1px solid #eaeaea;
      border-radius:12px;
      padding:1em;
      box-shadow:0 2px 10px rgba(0,0,0,.04);
    }

    figure img{
      width:100%;
      height:auto;
      display:block;
      border:1px solid #ddd;       
      border-radius:8px;
      background:#fafafa;
    }

    figcaption{
      font-size:.95em;            
      margin-top:.6em;
      color:#555;
    }