<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Портреты — каллиграфический лист</title>
  <style>
    :root{
      --paper:#f5f0e6;
      --ink:#1a1a1a;
      --ink2:#2a2a2a;
      --wash:rgba(0,0,0,.06);
      --line:rgba(0,0,0,.18);
      --accent:rgba(0,0,0,.35);
    }

    /* page */
    body{
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(900px 500px at 10% 0%, rgba(0,0,0,.06), transparent 55%),
        radial-gradient(900px 500px at 90% 100%, rgba(0,0,0,.05), transparent 60%),
        linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,.01)),
        var(--paper);
      color:var(--ink);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      letter-spacing:.2px;
    }

    /* subtle paper grain */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(0,0,0,.02),
          rgba(0,0,0,.02) 1px,
          transparent 1px,
          transparent 6px
        );
      mix-blend-mode:multiply;
      opacity:.25;
    }

    header{
      max-width:1100px;
      margin:28px auto 0;
      padding:0 18px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
    }

    .title{
      font-weight:600;
      font-size:18px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.9;
    }

    .subtitle{
      font-size:13px;
      opacity:.75;
      border-left:2px solid var(--line);
      padding-left:12px;
      line-height:1.35;
      max-width:520px;
    }

    main{
      max-width:1100px;
      margin:18px auto 44px;
      padding:0 18px;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:18px;
    }

    @media (max-width: 840px){
      .grid{ grid-template-columns: 1fr; }
      header{ align-items:flex-start; flex-direction:column; }
    }

    .card{
      position:relative;
      border:1px solid var(--line);
      background: rgba(255,255,255,.25);
      border-radius:18px;
      overflow:hidden;
      box-shadow: 0 18px 50px rgba(0,0,0,.08);
      backdrop-filter: blur(1px);
    }

    .card::after{
      /* soft ink wash in corner */
      content:"";
      position:absolute;
      width:240px; height:240px;
      right:-60px; top:-60px;
      background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.08), transparent 60%);
      transform: rotate(15deg);
      pointer-events:none;
    }

    .portrait{
      aspect-ratio: 4 / 3;
      width:100%;
      display:block;
      background:
        radial-gradient(120px 120px at 28% 35%, rgba(0,0,0,.08), transparent 65%),
        radial-gradient(220px 180px at 70% 55%, rgba(0,0,0,.06), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,.02), transparent 60%);
    }

    .meta{
      padding:14px 16px 16px;
      border-top:1px solid var(--line);
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:14px;
    }

    .name{
      font-size:18px;
      font-weight:600;
      letter-spacing:.02em;
      margin:0;
      line-height:1.1;
    }

    .dates{
      margin:6px 0 0;
      font-size:13px;
      opacity:.78;
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    .seal{
      flex:0 0 auto;
      width:46px; height:46px;
      border-radius:12px;
      border:1px solid var(--line);
      display:grid;
      place-items:center;
      background: rgba(0,0,0,.035);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
      position:relative;
      overflow:hidden;
    }
    .seal::before{
      /* tiny hatching */
      content:"";
      position:absolute;
      inset:-10px;
      background: repeating-linear-gradient(
        45deg,
        rgba(0,0,0,.07),
        rgba(0,0,0,.07) 1px,
        transparent 1px,
        transparent 5px
      );
      opacity:.35;
      transform: rotate(10deg);
    }
    .seal span{
      position:relative;
      font-weight:700;
      letter-spacing:.12em;
      font-size:12px;
      opacity:.85;
    }

    /* Inline SVG “calligraphy” look */
    svg{ width:100%; height:100%; }
    .ink-stroke{
      stroke: var(--ink2);
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      filter: url(#roughInk);
    }
    .ink-fill{
      fill: rgba(0,0,0,.08);
      filter: url(#roughInk);
    }
    .paper-wash{
      fill: rgba(0,0,0,.05);
    }

    /* Caption line under header */
    .rule{
      margin:14px 0 18px;
      height:1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
    }
  </style>
</head>

<body>
  <header>
    <div class="title">Четыре портрета</div>
    <div class="subtitle">
      Лист-коллаж в каллиграфической эстетике: тушь, неровная линия, лёгкие «размывы».
      Портреты — стилизованные, как зарисовки.
    </div>
  </header>

  <main>
    <div class="rule"></div>

    <section class="grid">
      
      <article class="card">
        <div class="portrait" aria-label="Портрет Владимира Проппа">
          <svg viewBox="0 0 800 600" role="img">
            <defs>
              <filter id="roughInk" x="-10%" y="-10%" width="120%" height="120%">
                <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="7" result="noise"/>
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.8" xChannelSelector="R" yChannelSelector="G"/>
              </filter>
              <linearGradient id="wash1" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="rgba(0,0,0,.08)"/>
                <stop offset="1" stop-color="rgba(0,0,0,0)"/>
              </linearGradient>
            </defs>

            
            <path class="paper-wash" d="M70,160 C210,40 410,70 520,150 C640,245 700,410 600,500 C470,625 230,560 130,430 C40,310 10,220 70,160 Z" opacity=".55"/>
            <path class="paper-wash" d="M520,95 C610,70 710,120 735,210 C760,300 700,380 610,360 C520,340 470,250 500,160 C505,130 510,110 520,95 Z" opacity=".35"/>

            
            <path class="ink-fill" d="M285,170
              C285,105 340,70 405,75
              C470,80 520,130 515,200
              C510,270 540,285 550,325
              C560,370 525,420 470,438
              C448,446 430,470 430,498
              C430,520 420,540 405,540
              C390,540 380,520 380,500
              C380,470 360,452 330,440
              C260,410 235,350 250,300
              C260,265 295,255 285,170 Z" opacity=".65"/>

            
            <path class="ink-stroke" stroke-width="10" d="M330,240 C360,210 405,205 445,220" opacity=".9"/>
            <path class="ink-stroke" stroke-width="9" d="M330,265 C360,245 400,240 440,255" opacity=".8"/>
            <path class="ink-stroke" stroke-width="8" d="M360,320 C395,350 430,350 468,322" opacity=".75"/>
            <path class="ink-stroke" stroke-width="7" d="M385,285 C385,305 385,325 385,345" opacity=".55"/>

            
            <path class="ink-stroke" stroke-width="14" d="M305,195 C320,125 380,95 440,105 C500,115 525,160 520,210" opacity=".8"/>
            <path class="ink-stroke" stroke-width="11" d="M260,305 C245,380 300,445 380,470" opacity=".65"/>
            <path class="ink-stroke" stroke-width="11" d="M550,325 C575,400 540,455 470,480" opacity=".6"/>

            
            <path class="ink-stroke" stroke-width="10" d="M320,505 C365,470 445,470 490,505" opacity=".75"/>
            <path class="ink-stroke" stroke-width="9" d="M360,540 C400,515 410,515 450,540" opacity=".6"/>
          </svg>
        </div>
        <div class="meta">
          <div>
            <p class="name">Владимир Пропп</p>
            <p class="dates">1895 — 1970</p>
          </div>
          <div class="seal" aria-hidden="true"><span>VP</span></div>
        </div>
      </article>

      
      <article class="card">
        <div class="portrait" aria-label="Портрет Александра Куприна">
          <svg viewBox="0 0 800 600" role="img">
            <defs>
              <filter id="roughInk" x="-10%" y="-10%" width="120%" height="120%">
                <feTurbulence type="fractalNoise" baseFrequency="0.95" numOctaves="2" seed="12" result="noise"/>
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.0" xChannelSelector="R" yChannelSelector="G"/>
              </filter>
            </defs>

            <path class="paper-wash" d="M110,180 C240,70 430,65 560,155 C700,252 725,420 615,510
              C500,605 270,575 145,440 C50,335 35,240 110,180 Z" opacity=".55"/>
            <path class="paper-wash" d="M560,120 C650,95 735,150 750,240 C765,330 690,395 610,360
              C540,330 505,245 530,170 C540,145 550,130 560,120 Z" opacity=".30"/>

            <path class="ink-fill" d="M300,180
              C315,105 385,80 450,95
              C525,112 545,175 535,235
              C528,275 545,295 560,330
              C580,375 555,430 500,455
              C475,468 455,492 455,520
              C455,540 440,555 420,555
              C400,555 385,540 385,520
              C385,490 360,470 330,455
              C260,420 240,360 260,310
              C275,270 290,245 300,180 Z" opacity=".65"/>

            
            <path class="ink-stroke" stroke-width="12" d="M335,315 C360,300 390,295 420,305 C450,315 480,315 505,305" opacity=".9"/>
            <path class="ink-stroke" stroke-width="10" d="M360,345 C395,372 440,372 475,345" opacity=".8"/>
            <path class="ink-stroke" stroke-width="8" d="M410,250 C410,280 410,310 410,340" opacity=".55"/>

            
            <path class="ink-stroke" stroke-width="10" d="M330,245 C360,225 395,225 420,240" opacity=".75"/>
            <path class="ink-stroke" stroke-width="10" d="M440,240 C470,225 505,230 525,250" opacity=".75"/>

            
            <path class="ink-stroke" stroke-width="14" d="M310,205 C320,135 380,105 445,118 C510,130 540,175 530,240" opacity=".8"/>
            <path class="ink-stroke" stroke-width="11" d="M260,320 C240,395 295,460 385,490" opacity=".6"/>
            <path class="ink-stroke" stroke-width="11" d="M560,330 C585,410 545,475 470,500" opacity=".6"/>

            
            <path class="ink-stroke" stroke-width="10" d="M315,520 C350,495 385,480 420,480 C455,480 490,495 525,520" opacity=".7"/>
            <path class="ink-stroke" stroke-width="8" d="M390,560 C410,530 430,530 450,560" opacity=".55"/>
          </svg>
        </div>
        <div class="meta">
          <div>
            <p class="name">Александр Куприн</p>
            <p class="dates">1870 — 1938</p>
          </div>
          <div class="seal" aria-hidden="true"><span>AK</span></div>
        </div>
      </article>

      
      <article class="card">
        <div class="portrait" aria-label="Портрет Фёдора Достоевского">
          <svg viewBox="0 0 800 600" role="img">
            <defs>
              <filter id="roughInk" x="-10%" y="-10%" width="120%" height="120%">
                <feTurbulence type="fractalNoise" baseFrequency="0.88" numOctaves="2" seed="21" result="noise"/>
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.2" xChannelSelector="R" yChannelSelector="G"/>
              </filter>
            </defs>

            <path class="paper-wash" d="M90,190 C220,60 420,55 560,160 C705,270 720,425 600,515
              C480,605 260,575 135,445 C40,330 30,250 90,190 Z" opacity=".55"/>

            <path class="ink-fill" d="M290,175
              C300,110 350,80 410,82
              C470,84 520,120 525,185
              C530,250 555,270 565,310
              C580,365 545,425 490,450
              C468,460 450,485 448,510
              C445,545 430,565 410,565
              C390,565 375,545 372,510
              C370,485 350,462 325,450
              C260,420 235,365 250,315
              C265,265 285,245 290,175 Z" opacity=".65"/>

            
            <path class="ink-stroke" stroke-width="10" d="M325,255 C360,230 395,232 420,252" opacity=".8"/>
            <path class="ink-stroke" stroke-width="10" d="M440,252 C470,232 505,238 525,262" opacity=".8"/>
            <path class="ink-stroke" stroke-width="7" d="M335,290 C320,310 318,340 330,360" opacity=".55"/>
            <path class="ink-stroke" stroke-width="7" d="M520,292 C535,312 538,342 525,362" opacity=".55"/>

            
            <path class="ink-stroke" stroke-width="12" d="M340,335 C372,318 402,315 430,325 C458,335 488,335 515,322" opacity=".9"/>
            <path class="ink-stroke" stroke-width="12" d="M360,368 C395,410 445,412 480,368" opacity=".75"/>

            
            <path class="ink-stroke" stroke-width="15" d="M300,210 C310,135 365,105 425,112 C485,120 525,160 525,210" opacity=".78"/>
            <path class="ink-stroke" stroke-width="11" d="M250,325 C235,410 300,475 385,505" opacity=".6"/>
            <path class="ink-stroke" stroke-width="11" d="M565,310 C592,410 545,485 470,515" opacity=".6"/>

            
            <path class="ink-stroke" stroke-width="10" d="M300,520 C345,490 380,475 410,475 C440,475 475,490 520,520" opacity=".7"/>
            <path class="ink-stroke" stroke-width="8" d="M385,565 C402,538 418,538 435,565" opacity=".55"/>
          </svg>
        </div>
        <div class="meta">
          <div>
            <p class="name">Фёдор Достоевский</p>
            <p class="dates">1821 — 1881</p>
          </div>
          <div class="seal" aria-hidden="true"><span>FD</span></div>
        </div>
      </article>

      
      <article class="card">
        <div class="portrait" aria-label="Портрет Джеймса Фрэзера">
          <svg viewBox="0 0 800 600" role="img">
            <defs>
              <filter id="roughInk" x="-10%" y="-10%" width="120%" height="120%">
                <feTurbulence type="fractalNoise" baseFrequency="0.92" numOctaves="2" seed="33" result="noise"/>
                <feDisplacementMap in="SourceGraphic" in2="noise" scale="1.9" xChannelSelector="R" yChannelSelector="G"/>
              </filter>
            </defs>

            <path class="paper-wash" d="M120,170 C260,55 470,60 590,170 C720,290 720,420 610,510
              C490,605 270,575 145,440 C60,340 45,235 120,170 Z" opacity=".55"/>

            <path class="ink-fill" d="M300,170
              C310,110 365,78 430,82
              C495,86 545,125 548,195
              C551,265 575,280 585,320
              C600,375 565,430 510,455
              C488,465 470,488 468,512
              C465,545 448,565 428,565
              C408,565 392,545 390,512
              C388,488 368,465 342,455
              C270,425 245,370 260,320
              C275,270 295,245 300,170 Z" opacity=".65"/>

            
            <path class="ink-stroke" stroke-width="9" d="M335,270 C365,252 395,252 420,270" opacity=".75"/>
            <path class="ink-stroke" stroke-width="9" d="M440,270 C470,252 500,252 525,270" opacity=".75"/>
            <path class="ink-stroke" stroke-width="6" d="M420,270 C430,268 440,268 448,270" opacity=".55"/>
            <path class="ink-stroke" stroke-width="6" d="M330,275 C318,285 312,300 316,315" opacity=".5"/>
            <path class="ink-stroke" stroke-width="6" d="M530,275 C545,285 552,300 548,315" opacity=".5"/>

            
            <path class="ink-stroke" stroke-width="8" d="M370,350 C405,370 445,370 480,350" opacity=".7"/>

            
            <path class="ink-stroke" stroke-width="14" d="M305,205 C320,132 385,105 450,115 C515,125 548,170 545,225" opacity=".78"/>
            <path class="ink-stroke" stroke-width="11" d="M260,330 C240,405 300,472 385,505" opacity=".6"/>
            <path class="ink-stroke" stroke-width="11" d="M585,320 C610,410 565,485 495,515" opacity=".6"/>

            
            <path class="ink-stroke" stroke-width="10" d="M305,520 C350,490 388,475 428,475 C468,475 506,490 550,520" opacity=".7"/>
            <path class="ink-stroke" stroke-width="8" d="M405,565 C420,540 435,540 450,565" opacity=".55"/>
          </svg>
        </div>
        <div class="meta">
          <div>
            <p class="name">Джеймс Фрэзер</p>
            <p class="dates">1854 — 1941</p>
          </div>
          <div class="seal" aria-hidden="true"><span>JF</span></div>
        </div>
      </article>
    </section>
  </main>
</body>
</html>