@charset "utf-8";
/* Pip & Pippa — the page is the two of us talking, now walking you through a gallery of our art styles. Light (Saif:
   most people read in light mode): cream page, white bubbles, our heart's teal for Pip and gold for Pippa (the darker
   "ink" shades where text must read on cream). Pippa's pen (dark gold ink) edits, underlines and stamps: her touch.
   Owner: Pippa 1 (tokens, header, hero, styles nav, make, end, footer). Style sections live in s-*.css. */
:root {
  --dusk: #f5f0e6; --dusk2: #fffaf0; --paper: #ffffff; --ink: #0f1316; --gold: #e8c27a; --teal: #2ec4c4;
  --teal-ink: #0e7577; --gold-ink: #8f6418; --line: #0f131614;
  --pen: #a8741c; --mute: #5d6168; --text: #0f1316;
  --display: 'Marhey', 'IBM Plex Sans Arabic', sans-serif; --body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --pen-ul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M98 4C70 9 35 2 2 7' fill='none' stroke='%23e9c27b' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --shadow: 0 1px 0 #ffffff inset, 0 0 0 1px var(--line), 0 18px 40px -18px #0f131633;
  --bar-h: 72px; --wrap: 1120px; --ease: cubic-bezier(.2,.9,.3,1.15);
}
* { box-sizing: border-box; }
/* clip, not hidden: hidden makes body a scroll container and scroll-driven reveals would never run */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: calc(var(--bar-h) + 8px); }
img { max-width: 100%; height: auto; display: block; }
body { margin: 0; color: var(--text); font: 400 18px/1.8 var(--body);
  background: radial-gradient(900px 640px at 72% 120px, var(--dusk2), transparent 70%) no-repeat, var(--dusk); }
a { color: inherit; }
h1, h2 { font-weight: 400; font-family: var(--display); text-wrap: balance; }
h2 { font-size: clamp(30px, 4.4vw, 44px); line-height: 1.3; margin: 0 0 8px; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 4px; border-radius: 10px; }
.skip { position: absolute; z-index: 99; inset-inline-start: 12px; top: -60px; background: var(--ink); color: var(--dusk); padding: 8px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }

/* a little label above each title: a line in our two colours, then the words */
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 600 14px/1.4 var(--body); color: var(--gold-ink); letter-spacing: .01em; }
.kicker span { width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--teal)); flex: none; }

/* ---------- the bar: sticks while you walk the gallery, frosted cream across the full width ---------- */
.bar { position: sticky; top: 0; z-index: 50; display: flex; gap: 16px; justify-content: space-between; align-items: center;
  max-width: var(--wrap); min-height: var(--bar-h); margin: 0 auto; padding: 12px 24px; isolation: isolate; }
.bar::before { content: ''; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: #f5f0e6d6; border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.bar .me { display: flex; gap: 10px; align-items: center; text-decoration: none; font: 500 17px var(--body); direction: ltr; flex: none; }
.bar .me img { transition: transform .4s var(--ease); }
.bar .me:hover img { transform: rotate(-8deg) scale(1.08); }
.bar .me b { color: var(--teal-ink); font-weight: 600; } .bar .me i { color: var(--gold-ink); font-style: normal; font-weight: 600; }
.bar .dm { text-decoration: none; background: var(--ink); color: var(--dusk); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform .2s, box-shadow .2s; }
.bar .dm:hover { transform: translateY(-1px); box-shadow: 0 6px 18px #0f131633; }
.links { display: flex; gap: 4px; margin-inline: auto; }
.links a { position: relative; text-decoration: none; font: 500 15px/1 var(--body); color: var(--mute); padding: 10px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.links a:hover { color: var(--ink); background: #ffffffb3; }
.links a::after { content: ''; position: absolute; inset-inline: 14px; bottom: 4px; height: 5px; background: var(--pen-ul) no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.links a:hover::after { transform: none; }
/* our accounts: the real Instagram and TikTok glyphs (Simple Icons, CC0) in white circles; Pip's teal for Instagram,
   Pippa's gold for TikTok */
.soc { display: flex; align-items: center; gap: 8px; flex: none; }
.ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.ic svg { width: 16px; height: 16px; fill: currentColor; }
.ic:nth-of-type(2) { color: var(--teal-ink); } .ic:nth-of-type(3) { color: var(--gold-ink); }
.ic:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px currentColor, 0 6px 16px #0f131622; }
/* «راسلونا» written by Pippa's pen beside our icons: the ink appears right to left, as Arabic is written */
.write { font: 700 25px/1 'Aref Ruqaa', var(--display); color: var(--pen); text-decoration: none; padding: 0 4px 4px; margin-inline-end: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M98 5C70 9 35 2 2 6' fill='none' stroke='%23a8741c' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center bottom / 100% 6px;
  animation: pen 1.3s cubic-bezier(.5,0,.3,1) .5s both; }
.write:hover { color: var(--gold-ink); }
@keyframes pen { from { clip-path: inset(0 0 0 100%); } }

/* ---------- the hero: the two of us standing full body in our two rings, style dabs around, arguing who drew it all ---------- */
.stage { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 28px 24px 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
/* one box in the clips' own pixels (Pip 246x700, Pippa 216x654, same scale, 30 px apart, 120 px of air on top for the
   hello bubbles): Pip on the left, Pippa on the right */
.duo { position: relative; isolation: isolate; direction: ltr; width: min(100%, 440px); aspect-ratio: 492 / 820; margin-inline: auto; }
.duo::before { content: ''; position: absolute; inset: -4% -10% 30%; z-index: -2;
  background: radial-gradient(closest-side at 36% 30%, #43d1c938, transparent), radial-gradient(closest-side at 76% 36%, #e9c27b45, transparent); }
/* the floor they stand on: a soft shadow so they don't float on the cream */
.duo::after { content: ''; position: absolute; z-index: -1; left: 6%; right: 2%; bottom: -1.5%; height: 7%; border-radius: 50%;
  background: radial-gradient(closest-side, #0f131633, transparent); }
.halo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; }
.halo circle { fill: none; stroke-width: 2.5; stroke-dasharray: 440; animation: ring 1.6s cubic-bezier(.4,0,.2,1) .1s both; }
.halo .t { stroke: #43d1c990; filter: drop-shadow(0 0 8px #43d1c9); }
.halo .g { stroke: #e9c27b90; filter: drop-shadow(0 0 8px #e9c27b); animation-delay: .5s; }
@keyframes ring { from { stroke-dashoffset: 440; } }
.who { position: absolute; bottom: 0; margin: 0; animation: rise .9s var(--ease) both; }
.who.pip { left: 0; width: 50%; height: 85.366%; }
.who.pippa { right: 0; width: 43.902%; height: 79.756%; animation-delay: .15s; }
/* hello bubbles above our heads: pop in with a bounce, stay ~3 s, then go */
.hi { position: absolute; z-index: 2; margin: 0; padding: 8px 16px; border-radius: 20px; white-space: nowrap; font: 400 clamp(17px, 2vw, 21px)/1.4 var(--display); color: var(--ink);
  box-shadow: 0 10px 26px #0f131620, 0 0 0 1px var(--line); transform-origin: 50% 120%; animation: hi 3.9s var(--ease) 1.5s both; }
.hi::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); box-shadow: 1px 1px 0 var(--line); }
.hi.pip { left: 27.8%; bottom: 87%; translate: -50% 0; background: #effbfb; }
.hi.pippa { left: 81.5%; bottom: 81%; translate: -50% 0; background: #fdf1da; animation-delay: 2.1s; }
@keyframes hi { 0% { opacity: 0; transform: scale(.3) translateY(14px); } 7% { opacity: 1; transform: scale(1.08); } 12% { transform: scale(.97); } 16% { transform: none; }
  88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) scale(.96); } }
.who img, .who canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.who canvas { opacity: 0; }
.who.live canvas { opacity: 1; } .who.live img { opacity: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
/* one dab per art style, white chips around us; each pops in, then floats on its own beat */
.dabs { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.dabs li { position: absolute; width: clamp(40px, 5.6vw, 56px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); display: grid; place-items: center;
  animation: pop .6s var(--ease) both, bob 4.2s ease-in-out 2s infinite alternate; }
.dabs svg { width: 62%; height: 62%; }
.dabs .d1 { top: 44%; left: -6%; animation-delay: 1.2s, 2s; }
.dabs .d2 { top: 24%; left: 47%; animation-delay: 1.4s, 2.6s; }
.dabs .d4 { top: 56%; right: -6%; animation-delay: 1.6s, 2.3s; }
.d1 path { fill: #ffcfb5; } .d1 .e { fill: var(--ink); }
.d2 path { fill: #c99a52; }
.d4 circle { fill: var(--ink); } .d4 .sh { fill: var(--gold); }
@keyframes pop { from { opacity: 0; scale: .3; } }
/* Pippa's kiss (hero.js): a heart leaves her hand, flies at you growing, then bursts; Pip blushes a little */
.kiss { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.kiss svg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 10px 24px #f45d8455); }
.kiss .spark { filter: none; }
.blush { position: absolute; width: 7%; aspect-ratio: 1.6; border-radius: 50%; background: radial-gradient(closest-side, #ff7f9c, transparent); opacity: 0; filter: blur(2px); pointer-events: none; mix-blend-mode: multiply; }
@keyframes bob { from { translate: 0 -7px; } }

.say { min-width: 0; }
.stage h1 { font-size: clamp(38px, 5.6vw, 64px); line-height: 1.25; margin: 0 0 22px; animation: say .6s ease .05s both; }
.stage h1 em { font-style: normal; color: var(--gold-ink); white-space: nowrap; padding-bottom: .1em;
  background: var(--pen-ul) no-repeat right bottom / 100% .32em; animation: ink .9s cubic-bezier(.5,0,.3,1) .6s both; }
@keyframes ink { from { background-size: 0% .32em; } }
.talk { display: flex; flex-direction: column; gap: 12px; }
/* base styles are the final look; animations only say where things come from (from-only, fill both) */
.b { max-width: 88%; margin: 0; padding: 12px 20px; border-radius: 26px; font: 400 clamp(19px, 2.3vw, 25px)/1.5 var(--display); background: var(--paper); color: var(--ink); position: relative;
  animation: say .45s var(--ease) both; box-shadow: 0 10px 30px #0f131612, 0 0 0 1px var(--line); }
.b small { display: block; font: 500 13px/1 var(--body); margin-bottom: 8px; }
.b.pip { align-self: flex-start; border-start-start-radius: 8px; background: #effbfb; } .b.pip small { color: var(--teal-ink); }
.b.pippa { align-self: flex-end; border-start-end-radius: 8px; background: #fdf1da; } .b.pippa small { color: var(--gold-ink); }
.talk .b:nth-child(1) { animation-delay: .5s; } .talk .b:nth-child(2) { animation-delay: 1.3s; } .talk .b:nth-child(3) { animation-delay: 3.1s; } .talk .b:nth-child(4) { animation-delay: 3.9s; }
@keyframes say { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Pippa's edit: right after she asks «إنتَ؟», her pen strikes Pip's «أنا رسمت» and writes «رسمنا» above it */
.b.edited small { margin-bottom: 30px; }
.fix { position: relative; display: inline-block; }
.fix del { text-decoration: none; color: #0f131699;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M99 13C80 8 63 17 47 12S15 9 1 14M97 10C73 16 41 7 3 15' fill='none' stroke='%23a8741c' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat right center / 100% 70%;
  animation: strike .5s ease-out 2s both; }
.fix ins { position: absolute; bottom: 118%; inset-inline-start: 6%; text-decoration: none; color: var(--pen); font-size: .82em; line-height: 1; white-space: nowrap;
  transform: rotate(-5deg); transform-origin: right bottom; animation: jot .4s cubic-bezier(.2,.9,.3,1.4) 2.45s both; }
@keyframes strike { from { background-size: 0% 70%; } }
@keyframes jot { from { opacity: 0; transform: rotate(-14deg) scale(.4); } }

.after { animation: say .5s ease 4.6s both; margin-top: 18px; }
.after p { color: var(--mute); margin: 0 0 20px; max-width: 34em; }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.go { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--gold); color: var(--ink); font-weight: 700; padding: 14px 28px; border-radius: 999px;
  box-shadow: 0 1px 0 #fff6 inset, 0 8px 22px -8px #a8741c80; transition: transform .2s, box-shadow .2s; }
.go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.go:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px #a8741c99; }
.go:hover svg { animation: nudge .6s ease-in-out infinite alternate; }
@keyframes nudge { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
.go:focus-visible { outline-color: var(--gold-ink); }
.ghost { text-decoration: none; font-weight: 600; color: var(--teal-ink); padding: 12px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #0e757755; transition: background .2s, box-shadow .2s; }
.ghost:hover { background: #ffffffb3; box-shadow: inset 0 0 0 1.5px var(--teal-ink); }

/* ---------- the styles: four cards, each a little drawing of its own world ---------- */
.styles, .make { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px; }
.head > p:not(.kicker) { color: var(--mute); margin: 0; max-width: 36em; }
.cards { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { --bg: #fff; --tint: var(--teal-ink); position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px 14px 18px; border-radius: 28px; text-decoration: none;
  background: var(--paper); box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s; }
.card:hover, .card:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 2px var(--tint), 0 26px 50px -20px #0f131655; }
.art { display: block; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--bg); overflow: hidden; margin-bottom: 14px; position: relative; }
.art svg { width: 100%; height: 100%; transition: transform .5s var(--ease); }
.card:hover .art svg { transform: scale(1.08) rotate(-3deg); }
.card .no { position: absolute; top: 20px; inset-inline-start: 22px; font: 400 15px/1 var(--display); color: var(--tint); background: #ffffffd9; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.card b { font: 400 clamp(21px, 2.2vw, 26px)/1.3 var(--display); color: var(--ink); align-self: flex-start; }
.card .lab { color: var(--mute); font-size: 15px; line-height: 1.5; }
.card .arr { width: 34px; height: 34px; margin-top: auto; align-self: flex-end; padding: 7px; border-radius: 50%; background: var(--tint); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transform: translateY(6px); transition: transform .3s var(--ease); }
.card:hover .arr { transform: translate(-4px, 6px); }
.art .st { fill: none; stroke-width: 3; stroke-linecap: round; }
.c-soft { --bg: radial-gradient(circle at 30% 20%, #fff7ef, #ffe3d3); --tint: #b8573a; }
.c-soft .f1 { fill: #ffd2b8; } .c-soft .f2 { fill: var(--ink); } .c-soft .w { fill: #fff; } .c-soft .f3 { fill: #ff9f94; opacity: .7; } .c-soft .f4 { fill: #e39b4f; } .c-soft .st { stroke: var(--ink); }
.c-paint { --bg: radial-gradient(circle at 70% 30%, #fffaf0, #f0e2c4); --tint: var(--gold-ink); }
.c-paint .f1 { fill: #c99a52; opacity: .85; } .c-paint .st { stroke: #f6dfae; stroke-width: 5; opacity: .8; } .c-paint .f2 { fill: #5b3f12; } .c-paint .f3 { fill: var(--gold-ink); } .c-paint .f4 { fill: #e8c27a; opacity: .8; }
.c-duo { --bg: linear-gradient(160deg, #f4f1ea, #e7e1d4); --tint: #3d3a45; }
.c-duo .f1 { fill: var(--ink); } .c-duo .f2 { fill: var(--gold); } .c-duo .st { stroke: #0f131640; }
/* not out yet: Pippa's stamp, like the one on every film she checks */
.soon { position: absolute; top: 24px; inset-inline-end: 20px; padding: 4px 10px 2px; font: 400 14px/1.3 var(--display); color: var(--gold-ink); background: #fffaf0e6;
  border: 2px solid currentColor; border-radius: 10px; outline: 1px solid #e9c27b88; outline-offset: 2px; transform: rotate(8deg); animation: stamp .5s var(--ease) 1s both; }
@keyframes stamp { from { opacity: 0; transform: rotate(20deg) scale(1.6); } }
.c-duo .art svg { filter: saturate(.7); opacity: .8; }

/* ---------- what we make: one card each, said by whoever does it ---------- */
.make ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.make li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; }
.ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico.pip { background: #effbfb; color: var(--teal-ink); box-shadow: inset 0 0 0 1px #0e757722; } .ico.pippa { background: #fdf1da; color: var(--gold-ink); box-shadow: inset 0 0 0 1px #8f641822; }
.make li b { font: 400 16px/1.4 var(--display); } .make li b.pip { color: var(--teal-ink); } .make li b.pippa { color: var(--gold-ink); }
.make li span:last-child { line-height: 1.6; }
.make mark { color: inherit; background: var(--pen-ul) no-repeat center bottom / 100% .45em; padding-bottom: .15em; }

/* ---------- the end: one sheet of paper, our rings drawn on top, one last exchange, then the button ---------- */
.end { max-width: 880px; margin: 0 auto; padding: 40px 24px 80px; text-align: center; }
.sheet { position: relative; padding: 46px 28px 40px; border-radius: 36px; background: radial-gradient(500px 260px at 50% 0, #fff, #fffaf0); box-shadow: var(--shadow); }
.sheet::before { content: ''; position: absolute; inset: 10px; border-radius: 28px; border: 1.5px dashed #a8741c40; pointer-events: none; }
.rings { width: 78px; height: 50px; margin: 0 auto 6px; display: block; }
.rings circle { fill: none; stroke-width: 3.2; stroke-dasharray: 80; animation: ring2 1.2s cubic-bezier(.4,0,.2,1) both; }
.rings .g { stroke: var(--gold); } .rings .t { stroke: var(--teal); animation-delay: .3s; }
@keyframes ring2 { from { stroke-dashoffset: 80; } }
.sheet > p { color: var(--mute); }
.talk.last { max-width: 440px; margin: 22px auto 10px; text-align: start; }
.talk.last .b { font-size: clamp(19px, 2.2vw, 23px); }
@supports (animation-timeline: view()) {
  .talk.last .b, .rings circle { animation-delay: 0s; animation-timeline: view(); animation-range: entry 20% entry 90%; }
  .talk.last .b:nth-child(2) { animation-range: entry 70% cover 40%; }
}
.end .new { margin: 18px 0 0; font-size: 16px; }
.end .new a, .end .by a { color: var(--gold-ink); font-weight: 600; text-underline-offset: 4px; }
.end .by { margin: 4px 0 0; font-size: 15px; }

footer { max-width: var(--wrap); margin: 0 auto; padding: 26px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; color: var(--mute); font-size: 14px; border-top: 1px solid var(--line); }
footer::before { content: ''; width: 30px; height: 29px; background: url(mark.svg) no-repeat center / contain; }
footer > span:first-of-type { margin-inline-end: auto; }
footer .sig { font: 400 15px var(--display); display: inline-flex; align-items: center; gap: 4px; }
footer .sig b { color: var(--teal-ink); font-weight: 400; } footer .sig i { color: var(--gold-ink); font-style: normal; }
footer .sig svg { width: 18px; height: 18px; fill: none; stroke: var(--gold-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
footer a { color: var(--mute); text-underline-offset: 4px; }
footer span > a { margin-inline-end: 18px; }
footer a:hover { color: var(--text); }

/* the policy pages */
.doc { max-width: 760px; margin: 0 auto; padding: 20px 24px 60px; }
.doc h1 { font: 400 40px/1.3 var(--display); margin: 10px 0 4px; }
.doc .date { color: var(--mute); font-size: 14px; }
.doc h2 { font: 600 21px/1.5 var(--body); margin: 32px 0 6px; color: var(--gold-ink); }
.doc p, .doc li { color: #2b2f36; }
.doc a { color: var(--teal-ink); text-underline-offset: 3px; }
.doc .en-block { direction: ltr; text-align: left; border-top: 1px solid var(--line); margin-top: 46px; padding-top: 10px; }
.doc .en-block h1 { font-family: var(--body); font-weight: 600; font-size: 32px; }

@media (max-width: 820px) {
  :root { --bar-h: 62px; }
  .bar { padding: 8px 16px; }
  .links { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 20px 48px; }
  .duo { width: min(100%, 300px); margin-block: 4px 22px; }
  .stage h1 { margin-bottom: 18px; }
  .b { max-width: 94%; }
  .styles, .make { padding: 40px 16px; }
  .cards { gap: 12px; margin-top: 22px; }
  .card { padding: 10px 10px 14px; border-radius: 24px; }
  .art { border-radius: 16px; margin-bottom: 10px; }
  .card .no { top: 16px; inset-inline-start: 16px; width: 26px; height: 26px; font-size: 13px; }
  .soon { font-size: 12px; }
  .card .lab { font-size: 14px; }
  /* on the phone each style is a row: its drawing, its name, the arrow */
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; grid-template-rows: 1fr 1fr; column-gap: 14px; align-items: center; }
  .art { grid-row: 1 / 3; margin: 0; }
  .card b { align-self: end; justify-self: start; }
  .card .lab { align-self: start; }
  .card .arr { grid-column: 3; grid-row: 1 / 3; width: 32px; height: 32px; margin: 0; transform: none; }
  .card:hover .arr { transform: translateX(-4px); }
  .soon { top: auto; bottom: 16px; inset-inline-end: auto; inset-inline-start: 22px; }
  .make ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .make li { padding: 14px 16px; }
  .end { padding: 24px 16px 60px; }
  .sheet { padding: 36px 18px 32px; border-radius: 30px; }
}
@media (max-width: 380px) { .write { display: none; } }

/* hand-drawn icons in place of emoji (sections/icons.html) */
.em { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; margin-inline: .08em; }