:root{
  --page-bg: #c9c5c5;
  --ink: #222;
  --muted:#555;
  --rule:#ddd;
  --card:#f7f7f7;
  --accent:#f2442e;
  --radius:16px;
  --shadow:0 4px 16px rgba(0,0,0,.1);
}

*{ box-sizing:border-box; }
html{ background:var(--page-bg,#c9c5c5); color:var(--ink,#222); }
img,svg{ max-width:100%; height:auto; display:block; }

main{
  width:min(92vw,1100px);
  margin:2rem auto;
  padding:0 1rem;

  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;

  > header{
    grid-column: 1 / -1;          
    text-align:center;
    margin-bottom:1.25rem;

    h1{
      font-size:clamp(28px,4vw,40px);
      font-weight:800;
      line-height:1.1;
      margin:0 0 .35rem;
    }
    p{ color:var(--muted,#555); }
  }

  > article{
    background: var(--card-bg, var(--card, #f7f7f7));
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.08));
    padding: 1rem .95rem;


    h2{
      font-size:clamp(18px,2.4vw,24px);
      margin:.1rem 0 .5rem;
      line-height:1.25;
      position:relative;
      padding-bottom:.35rem;
      &::after{
        content:"";
        display:block;
        width:64px; height:3px;
        margin-top:.35rem;
        background:var(--accent,#f2442e);
        border-radius:999px;
      }
    }

    > p{ color:var(--muted,#555); margin:.25rem 0 .6rem; }

    ul,ol{
      margin:.25rem 0 0; padding-left:0;
      list-style-position:inside;
      display:grid; gap:.35rem;
    }
    li{ overflow-wrap:anywhere; }

    svg{ margin:.25rem auto .5rem; }

    a{
      color:inherit; text-decoration:none; border-bottom:1px dotted transparent;
      &:hover,&:focus-visible{ border-bottom-color:currentColor; }
    }
  }
}

@media (min-width: 720px){
  main{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 1025px){
  main{
    width:min(92vw,1200px);
    gap:1.2rem;
  }
}

@media print{
  main{
    width:100%; margin:0; padding:0 12mm; box-shadow:none; display:block;
  }
  main>article{
    break-inside:avoid;
    background:#fff; box-shadow:none; border:1px solid #eee;
  }
}