@charset "utf-8";
/* paintToon (مرسوم): our hand-painted 2D films hung like small canvases on warm paper. Base styles are the final
   look; keyframes only say where things come from (fill both), so reduced motion and no-JS show it all. */
#painted { --pt-paper: #fbf5e8; --pt-wash: #e8c27a;
  position: relative; isolation: isolate; overflow: clip; max-width: 1120px; margin: 0 auto; padding: 72px 20px 84px;
  /* paper grain: fractal noise tinted sepia at low alpha, tiled */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(70% 50% at 80% 0%, #fff6df, transparent 70%), var(--pt-paper);
  border-radius: 34px; box-shadow: 0 0 0 1px var(--line); }
#painted .pt-defs { position: absolute; width: 0; height: 0; }
/* soft watercolour pools of our two colours behind the works */
#painted .pt-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .5; pointer-events: none; }
#painted .b1 { width: 340px; height: 300px; top: 220px; left: -120px; background: radial-gradient(#e8c27a88, transparent 70%); }
#painted .b2 { width: 320px; height: 320px; bottom: 140px; right: -120px; background: radial-gradient(#2ec4c455, transparent 70%); }

#painted .pt-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
#painted .pt-kick { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 14px; border-radius: 999px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line); font: 500 14px/1.4 var(--body); color: var(--mute); }
#painted .pt-kick svg { width: 18px; height: 18px; fill: var(--gold-ink); }
#painted .pt-kick b { color: var(--gold-ink); font-weight: 600; }
#painted .pt-ttl { position: relative; display: inline-block; padding: 0 6px; }
#painted .pt-stroke { position: absolute; z-index: -1; inset-inline: -4%; bottom: -2px; width: 108%; height: .55em; overflow: visible; }
#painted .pt-stroke path { fill: none; stroke: var(--pt-wash); stroke-width: 14; stroke-linecap: round; opacity: .55; filter: url(#pt-wash);
  stroke-dasharray: 320; animation: pt-brush 1.4s cubic-bezier(.5,0,.2,1) .3s both; }
@keyframes pt-brush { from { stroke-dashoffset: 320; } }
#painted .pt-line { margin: 6px auto 0; color: var(--mute); font-size: 17px; }

#painted .pt-work { display: grid; gap: 26px; align-items: center; }
#painted .pt-work + .pt-work { margin-top: 72px; }
#painted .pt-sub { margin: 0; font: 700 22px/1.2 'Aref Ruqaa', var(--display); color: var(--pen); }
#painted h3 { margin: 2px 0 6px; font: 400 clamp(26px, 3.2vw, 34px)/1.3 var(--display); }
#painted h3 span { font-size: .6em; color: var(--mute); }
#painted .pt-meta { margin: 0 0 18px; color: var(--mute); font-size: 16.5px; }
#painted .talk { gap: 10px; }
#painted .b { animation: none; font-size: clamp(18px, 2.1vw, 21px); padding: 12px 18px; max-width: 94%; }
#painted .pt-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--ink); color: var(--dusk); font: 600 15px var(--body); transition: transform .2s, box-shadow .2s; }
#painted .pt-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#painted .pt-go:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0f131633; }

/* the canvases: cream mat, deckled painted edge, a warm light breathing across each painting */
#painted .pt-gal { display: grid; grid-template-columns: 1.12fr 1fr; gap: 14px; }
#painted .cv { margin: 0; position: relative; display: flex; flex-direction: column; padding: 8px 8px 0; background: #fffdf7; border-radius: 6px;
  box-shadow: 0 1px 0 #fff inset, 0 14px 30px -12px #5a3f1440, 0 2px 6px #5a3f1418; transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
#painted .cv:nth-child(2) { --r: 1.2deg; } #painted .cv:nth-child(3) { --r: -1deg; } #painted .cv.tall, #painted .cv.wide { --r: -.6deg; }
#painted .cv:hover { transform: rotate(0deg) translateY(-3px); }
#painted .cv-in { position: relative; flex: 1; overflow: hidden; border-radius: 2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect x='3' y='3' width='194' height='194' filter='url(%23d)'/%3E%3C/svg%3E") center / 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5'/%3E%3C/filter%3E%3Crect x='3' y='3' width='194' height='194' filter='url(%23d)'/%3E%3C/svg%3E") center / 100% 100%; }
#painted .cv-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(80% 60% at 70% 20%, #fff3d0cc, transparent 70%), linear-gradient(#0000 60%, #3a24081f);
  animation: pt-breathe 7s ease-in-out infinite alternate both; }
#painted .cv:nth-child(2) .cv-in::after { animation-delay: -2.5s; } #painted .cv:nth-child(3) .cv-in::after { animation-delay: -5s; }
@keyframes pt-breathe { from { opacity: .45; } }
#painted .cv img, #painted .cv video { width: 100%; height: 100%; object-fit: cover; display: block; background: #e9dcc2; }
#painted figcaption { padding: 6px 4px 8px; text-align: center; font: 700 18px/1.2 'Aref Ruqaa', var(--display); color: var(--gold-ink); }

/* الضحى: the tall painting on one side, dawn and night stacked beside it */
#painted .g-duha .tall { grid-row: span 2; }
#painted .g-duha .tall .cv-in { aspect-ratio: 9 / 16; }
#painted .g-duha .cv:not(.tall) .cv-in { min-height: 120px; }
#painted .g-duha .cv:not(.tall) img { position: absolute; inset: 0; }
/* أسوة: the moving shot large, the two brushes side by side under it */
#painted .g-souq { grid-template-columns: 1fr; }
#painted .g-souq .wide { grid-column: 1 / -1; }
#painted .g-souq .wide .cv-in { aspect-ratio: 432 / 520; max-height: 560px; }
#painted .g-souq .cv:not(.wide) .cv-in { aspect-ratio: 720 / 866; }

@media (min-width: 900px) {
  #painted { padding: 96px 56px 104px; }
  #painted .pt-work { grid-template-columns: 360px 1fr; gap: 56px; }
  #painted .pt-work.souq { grid-template-columns: 1fr 360px; }
  #painted .souq .pt-copy { order: 2; }
  #painted .g-duha { max-width: 560px; justify-self: center; width: 100%; }
  /* the walk a little larger, both brushes beside it on one baseline */
  #painted .g-souq { grid-template-columns: 1.2fr 1fr; align-items: end; }
  #painted .g-souq .wide { grid-column: auto; }
  #painted .g-souq .wide .cv-in { max-height: none; }
}
@media (max-width: 899px) { #painted { border-radius: 0; box-shadow: none; } }
/* Motion plays for everyone, reduced-motion too (Abood, 2026-10-22: «نحن نحرك ونتعب وغيرنا ما يشوفوكم تتحركون»). */