/* ===========================================
   Studio 3 Arts — стили внутреннего контента
   =========================================== */

   :root {
    --s3a-yellow: #FFE600;
    --s3a-yellow-soft: #FFF6B3;
    --s3a-magenta: #E5007D;
    --s3a-black: #111111;
    --s3a-white: #FFFFFF;
    --s3a-toothpaste: #A8E6D6;
    --s3a-grey: #8a8a8b;
  
    /* Подставьте шрифт сайта из main.css */
    --s3a-font: "Helvetica Neue", Arial, sans-serif;
  }
  
  /* Контейнер основного текста */
  .content {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 5vw 80px;
    font-family: var(--s3a-font);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--s3a-black);
  }
  
  .content > *:first-child {
    margin-top: 0;
  }
  
  /* ---------- Заголовки ---------- */
  
  .content h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 0.6em;
    position: relative;
    display: inline-block;
  }
  
  .content h1::after {
    content: "";
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    bottom: 0.05em;
    height: 0.28em;
    background: var(--s3a-yellow);
    z-index: -1;
    transform: skewX(-12deg);
  }
  
  .content h2 {
    display: inline-block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--s3a-white);
    background: var(--s3a-magenta);
    padding: 0.2em 0.6em;
    margin: 2.2em 0 0.8em;
    transform: skewX(-8deg);
  }
  
  .content h2 > * {
    display: inline-block;
    transform: skewX(8deg);
  }
  
  .content h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--s3a-magenta);
    margin: 1.8em 0 0.5em;
  }
  
  .content h4 {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 1.5em 0 0.4em;
  }
  
  /* ---------- Абзацы и ссылки ---------- */
  
  .content p {
    margin: 0 0 1.1em;
  }
  
  .content a {
    color: var(--s3a-black);
    text-decoration: none;
    background: linear-gradient(var(--s3a-yellow), var(--s3a-yellow)) 0 88% / 100% 0.4em no-repeat;
    transition: background-size 0.2s ease;
  }
  
  .content a:hover,
  .content a:focus-visible {
    color: var(--s3a-magenta);
    background-size: 100% 100%;
    background-color: var(--s3a-yellow);
  }
  
  .content strong {
    font-weight: 800;
  }
  
  .content .lead {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1.6em;
  }
  
  /* ---------- Маркированные списки ---------- */
  
  .content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.4em;
  }
  
  .content ul li {
    position: relative;
    padding-left: 1.9em;
    margin-bottom: 0.6em;
  }
  
  .content ul li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.5em;
    width: 0.55em;
    height: 0.55em;
    background: var(--s3a-magenta);
    transform: rotate(45deg);
  }
  
  .content ul ul li::before {
    background: var(--s3a-black);
    width: 0.4em;
    height: 0.4em;
  }
  
  /* Нумерованные списки */
  .content ol {
    padding-left: 0;
    margin: 0 0 1.4em;
    counter-reset: s3a-counter;
    list-style: none;
  }
  
  .content ol li {
    counter-increment: s3a-counter;
    position: relative;
    padding-left: 2.6em;
    margin-bottom: 0.6em;
  }
  
  .content ol li::before {
    content: counter(s3a-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.9em;
    height: 1.9em;
    line-height: 1.9em;
    text-align: center;
    background: var(--s3a-yellow);
    font-weight: 800;
    transform: skewX(-8deg);
  }
  
  /* ---------- Таблицы ---------- */
  
  .content .table-wrap {
    overflow-x: auto;
    margin: 1.5em 0 2em;
    -webkit-overflow-scrolling: touch;
  }
  
  .content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
    min-width: 480px;
  }
  
  .content caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    padding-bottom: 0.6em;
  }
  
  .content th,
  .content td {
    padding: 0.85em 1em;
    text-align: left;
    vertical-align: top;
    border-bottom: 2px solid var(--s3a-black);
  }
  
  .content th {
    background: var(--s3a-black);
    color: var(--s3a-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85rem;
  }
  
  .content tbody tr:nth-child(even) td {
    background: var(--s3a-yellow-soft);
  }
  
  .content tbody tr:hover td {
    background: var(--s3a-toothpaste);
  }
  
  /* ---------- Цитаты и выделенные блоки ---------- */
  
  .content blockquote {
    margin: 2em 0;
    padding: 1.4em 1.6em;
    background: var(--s3a-yellow);
    font-size: 1.15rem;
    font-weight: 600;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  }
  
  .content blockquote p:last-child {
    margin-bottom: 0;
  }
  
  /* Информационная плашка */
  .content .note {
    margin: 2em 0;
    padding: 1.2em 1.4em;
    background: var(--s3a-toothpaste);
    border-left: 0.5em solid var(--s3a-magenta);
  }
  
  .content .note p:last-child {
    margin-bottom: 0;
  }
  
  /* Разделитель с диагональным срезом */
  .content hr {
    border: 0;
    height: 0.5em;
    margin: 3em 0;
    background: linear-gradient(105deg, var(--s3a-yellow) 49%, var(--s3a-magenta) 50%);
  }
  
  /* Код */
  .content code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--s3a-yellow-soft);
    padding: 0.1em 0.35em;
  }
  
  /* ---------- Мобильная версия ---------- */
  
  @media (max-width: 640px) {
    .content {
      padding: 40px 20px 60px;
    }
  
    .content h2 {
      font-size: 1.35rem;
    }
  }