/* Acryna poster kit (docs/art-direction/teachers.md): title lockups, info blocks, footers and photo effects
   that a composition (kit.js) lays over an AI picture. Everything is sized in container units of the design
   (.dz is a size container), so a thumbnail, the editor and a 4K export lay out the same.
   Colours come in as custom properties per element (--b brand/back, --f front/text, --i ink, --s sun/accent),
   resolved from the design's palette in kit.js, so any brand recolours the whole kit. */

.dz{--k-round:'Baloo Bhaijaan 2';--k-geo:'Alexandria';--k-badeen:'Badeen Display';--k-kufam:'Kufam';--k-changa:'Changa';
  --k-lalezar:'Lalezar';--k-lemon:'Lemonada';--k-rakkas:'Rakkas';--k-jom:'Jomhuria';--k-reemfun:'Reem Kufi Fun';--k-readex:'Readex Pro';
  --k-beiruti:'Beiruti';--k-zain:'Zain';--k-pixel:'Handjet';--k-reemink:'Reem Kufi Ink';--k-blaka:'Blaka';--k-messiri:'El Messiri';
  --k-marhey:'Marhey';--k-ruqaa:'Aref Ruqaa';--k-ruqaaink:'Aref Ruqaa Ink';--k-playpen:'Playpen Sans Arabic';--k-vibes:'Vibes';--k-plex:'IBM Plex Sans Arabic';
  --k-cairo:'Cairo';--k-tajawal:'Tajawal';--k-almarai:'Almarai';--k-poppins:'Poppins';--k-rubik:'Rubik';--k-bebas:'Bebas Neue';--k-lilita:'Lilita One'}

/* ---------- placement: the positioned box (.L) carries the kit element; rotation and scale live inside ---------- */
/* max-content: an element anchored mid-canvas would otherwise get only the space to the edge and wrap early */
.dz .K{font-size:calc(var(--sc,1) * 1cqmin);line-height:1.15;color:#fff;white-space:nowrap;width:max-content}
.dz .K .ki{display:inline-flex;flex-direction:column;align-items:center;transform:rotate(var(--rot,0deg));transform-origin:center}
.dz .K[data-a="r"] .ki{align-items:flex-end}
.dz .K[data-a="l"] .ki{align-items:flex-start}
.dz .K .ltr{direction:ltr;unicode-bidi:isolate}
.dz svg.ic{width:1em;height:1em;flex:none;display:block}
.dz svg.ic.line{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dz svg.ic.mark{fill:currentColor}

/* stacked text layers: an outline/extrusion copy under the fill copy (keeps Arabic joins clean, unlike a stroke on top) */
.k-stk{display:grid}
.k-stk>span{grid-area:1/1;display:block}
.k-stk .k-ex{color:var(--i);-webkit-text-stroke:var(--sw,1.6em) var(--o,#fff)}
.k-stk .k-ol{color:var(--i);-webkit-text-stroke:var(--iw,.9em) var(--i)}
.k-stk .k-fi{background:var(--fill,var(--f));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- title lockups (L1–L14) ---------- */
.k-t{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
.k-t .kick{font-family:var(--k-geo);font-weight:700;font-size:3.4em;padding:.25em .9em .35em;border-radius:.6em;background:var(--s);color:var(--sf);margin-bottom:-.15em;position:relative;z-index:2}
.k-t .sub{font-family:var(--k-geo);font-weight:700;font-size:4em;margin-top:.3em;text-shadow:0 .05em .2em rgba(0,0,0,.45)}
.k-con{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--s);color:var(--sf);font-family:var(--k-round);font-weight:800;font-size:4.2em;line-height:1;box-shadow:0 .08em .3em rgba(0,0,0,.3);vertical-align:middle}

/* L1 ribbons: rounded bands, brand then ink, tilted against each other */
.k-ribbons .bd{font-family:var(--k-round);font-weight:800;padding:.08em .5em .18em;border-radius:.28em;line-height:1.05;box-shadow:0 .06em .22em rgba(0,0,0,.28)}
.k-ribbons .bd.a{font-size:10.5em;background:var(--b);color:var(--f);transform:rotate(-3deg)}
.k-ribbons .bd.b{font-size:6.6em;background:var(--i);color:#fff;transform:rotate(2deg) translateX(.25em);margin-top:-.12em}

/* L2 3D sticker: gradient fill, ink outline, extruded shade and a white outer rim */
.k-sticker{font-family:var(--k-round);font-weight:800;line-height:1}
.k-sticker .ln{font-size:12em;--sw:.34em;--iw:.15em;--o:#fff}
.k-sticker .ln+.ln{font-size:9.5em;margin-top:-.08em}
.k-sticker .k-ex{text-shadow:0 .03em 0 var(--i),0 .06em 0 var(--i),0 .09em 0 var(--i),0 .12em 0 var(--i),0 .16em .1em rgba(0,0,0,.35)}

/* L3 flat duo: two huge words in two colours, the connector in a circle between them */
.k-duo{font-family:var(--k-round);font-weight:800;line-height:.95}
.k-duo .w1{font-size:10em;color:var(--s2)}
.k-duo .w2{font-size:14em;color:#fff;text-shadow:0 .03em .12em rgba(0,0,0,.35)}
.k-duo .row{display:flex;align-items:center;gap:.25em}

/* L4 frosted glass: a translucent panel with a hairline rim; split = dark glass beside a solid cream panel */
.k-glass{display:flex;align-items:stretch;gap:0;border-radius:2.4em;overflow:hidden;box-shadow:0 1.2em 3em rgba(0,0,0,.28)}
.k-glass .pa{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(1.6em);backdrop-filter:blur(1.6em);border:.25em solid rgba(255,255,255,.45);border-radius:2.4em;padding:.4em 1.1em .7em;font-family:var(--k-geo);font-weight:800;font-size:2em;color:#fff}
.k-glass .pa b{display:block;font-size:4.6em;line-height:1.05}
.k-glass .pb{background:var(--cream,#F2E7C9);color:var(--i);border-radius:2.4em;padding:.4em 1.1em .7em;font-family:var(--k-geo);font-weight:800;font-size:2em;margin-inline-start:-.6em}
.k-glass .pb b{display:block;font-size:4.6em;line-height:1.05}

/* L5 torn paper strips (edges from clip-path), optionally ruled like a notebook */
.k-torn{display:flex;flex-direction:column;align-items:center}
.k-torn .st{font-family:var(--k-round);font-weight:800;line-height:1.05;padding:.12em .55em .2em;background:#fff;color:var(--i);filter:drop-shadow(0 .06em .12em rgba(0,0,0,.35))}
.k-torn .st.a{font-size:10em;transform:rotate(-2.5deg)}
.k-torn .st.b{font-size:7em;background:var(--b);color:var(--f);transform:rotate(1.5deg);margin-top:-.1em}
.k-torn .st.ruled{background:repeating-linear-gradient(180deg,#fff 0 .42em,#BFD3EA .42em .45em)}
.k-torn .tag{font-family:var(--k-geo);font-weight:800;font-size:3.6em;background:var(--s);color:var(--sf);padding:.12em .6em;transform:rotate(-2deg);margin-top:.2em}

/* L6 direction sign: arrow-shaped boards, like a street sign (the curriculum as a road) */
.k-sign{display:flex;flex-direction:column;gap:.6em;align-items:center}
.k-sign .bo{font-family:var(--k-kufam);font-weight:900;font-size:6.4em;line-height:1.1;color:#fff;background:var(--b);padding:.25em 1.2em .3em .7em;clip-path:polygon(0 0,86% 0,100% 50%,86% 100%,0 100%);box-shadow:inset 0 0 0 .08em rgba(255,255,255,.7);border-radius:.12em}
.k-sign .bo.b{background:var(--i);padding:.25em .7em .3em 1.2em;clip-path:polygon(14% 0,100% 0,100% 100%,14% 100%,0 50%);font-size:5em}

/* L7 bracket label: a dark plate held by thin white brackets, a small line under it */
.k-bracket{position:relative;padding:1.4em 1.8em}
.k-bracket .pl{font-family:var(--k-round);font-weight:800;font-size:7.6em;background:var(--b);color:var(--f);padding:.12em .6em .22em;border-radius:.18em;box-shadow:0 .1em .3em rgba(0,0,0,.35)}
.k-bracket::before,.k-bracket::after{content:"";position:absolute;top:0;bottom:1.6em;width:3.2em;border:.35em solid #fff}
.k-bracket::before{right:0;border-left:0;border-radius:0 1em 1em 0}
.k-bracket::after{left:0;border-right:0;border-radius:1em 0 0 1em}
.k-bracket .sub{font-size:3.4em;font-weight:600;margin-top:.5em}

/* L8 cut shapes: scalloped cloud, blob or pentagon behind the text (drawn as an inline SVG) */
.k-shape{position:relative;display:grid;place-items:center;padding:3.4em 4.6em}
.k-shape>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 .9em 1.6em rgba(0,0,0,.3))}
.k-shape .tx{position:relative;font-family:var(--k-geo);font-weight:900;font-size:11em;line-height:1.05;color:var(--f)}
.k-shape .tx small{display:block;font-size:.62em;font-weight:500}
.k-shape .tag{position:absolute;top:-.7em;inset-inline-end:1em;font-family:var(--k-geo);font-weight:800;font-size:3.6em;line-height:1.2;padding:.18em .9em .24em;border-radius:99em;background:#fff;color:var(--i);box-shadow:0 .12em .4em rgba(0,0,0,.18)}

/* L9 giant: oversized white words with a coloured offset shadow */
.k-mega{font-family:var(--k-round);font-weight:800;line-height:.92;color:#fff;text-shadow:.04em .05em 0 var(--b),.07em .09em .12em rgba(0,0,0,.35)}
.k-mega .ln{font-size:15em}
.k-mega .ln+.ln{font-size:11em}

/* L10 kashida editorial: light geometric letters stretched with tatweel, no letter-spacing (it breaks Arabic joins) */
.k-kashida{font-family:var(--k-readex);font-weight:700;line-height:1.05;color:#fff}
.k-kashida .ln{font-size:10em}
.k-kashida .ln.b{color:var(--s2);font-weight:300}
.k-kashida .yr{font-family:var(--k-poppins);font-weight:800;font-size:3.2em;background:#fff;color:var(--i);padding:.1em .7em;border-radius:99em;margin-top:.4em;direction:ltr}

/* L12 themed type: the letters tell the subject (pixel board, parchment, wax seal) */
.k-themed.pixel{background:var(--chalk,#1F5B3A);border-radius:1.2em;padding:1.4em 3em;box-shadow:inset 0 0 0 .5em rgba(255,255,255,.08),0 1em 2.4em rgba(0,0,0,.35);transform:rotate(-2deg)}
.k-themed.pixel .ln{font-family:var(--k-pixel);font-weight:800;font-size:14em;line-height:.95;color:#fff;text-shadow:.04em .04em 0 rgba(0,0,0,.35)}
.k-themed.pixel .tg{font-family:var(--k-round);font-weight:800;font-size:4em;background:var(--s);color:var(--sf);padding:.15em .8em;border-radius:99em;margin-top:.3em}
.k-themed.parch{background:radial-gradient(120% 90% at 50% 40%,#F4E3B5,#E2C88C 70%,#C9A15F);border-radius:.6em;padding:2em 3.4em;box-shadow:0 1em 2.4em rgba(0,0,0,.35),inset 0 0 2.4em rgba(120,70,20,.45);transform:rotate(-1.5deg)}
.k-themed.parch .ln{font-family:var(--k-reemink);font-size:11em;line-height:1.05;color:#8E2A12}
.k-themed.parch .sub{font-family:var(--k-messiri);font-weight:700;font-size:4em;color:#5A2A0E}
/* (thin strokes: a thick text-stroke turns Arabic joins into spikes) */
.k-themed.seal .ln{font-family:var(--k-round);font-weight:800;font-size:12em;line-height:.95;--sw:.16em;--iw:.08em;--o:var(--i)}
.k-themed.seal .k-ex{text-shadow:0 .04em 0 var(--i),0 .08em 0 var(--i),0 .12em .08em rgba(0,0,0,.4)}
.k-seal{display:inline-grid;place-items:center;width:5.6em;height:5.6em;border-radius:46% 54% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 38% 32%,#C24A3A,#7A1A12 70%);box-shadow:0 .25em .6em rgba(0,0,0,.4),inset 0 0 0 .35em rgba(0,0,0,.18),inset 0 0 0 .55em rgba(255,255,255,.08);color:#FBE7D0;font-family:var(--k-round);font-weight:800;font-size:3.6em;transform:rotate(-10deg)}

/* L13 condensed studio: huge flat letters, the second line one shade darker, a year pill under */
.k-condensed{font-family:var(--k-badeen);line-height:.9;color:#fff}
.k-condensed .ln{font-size:17em}
.k-condensed .ln.b{color:var(--s2)}
.k-condensed .yr{font-family:var(--k-poppins);font-weight:800;font-size:3.4em;background:var(--i);color:#fff;padding:.1em .8em;border-radius:99em;margin-top:.3em;direction:ltr;transform:rotate(-4deg)}

/* L14 question: a white word with a brand rim, then a sun box, the ?! as part of the design */
.k-question .q1{font-family:var(--k-round);font-weight:800;font-size:15em;line-height:.95;--sw:.16em;--iw:0;--o:var(--s)}
.k-question .q1 .k-ex{color:#fff;text-shadow:0 .05em .1em rgba(0,0,0,.3)}
.k-question .q2{font-family:var(--k-round);font-weight:800;font-size:9.5em;line-height:1.05;background:linear-gradient(180deg,var(--s),color-mix(in srgb,var(--s) 80%,#000));color:var(--i);padding:.05em .45em .14em;border-radius:.16em;box-shadow:0 .08em .25em rgba(0,0,0,.3);margin-top:-.05em}
.k-question .q2 em{font-style:normal;color:var(--b)}
.k-question .tg{font-family:var(--k-geo);font-weight:700;font-size:3.6em;background:var(--b);color:var(--f);padding:.2em .8em;border-radius:.4em;transform:rotate(-6deg);margin-top:-.3em;align-self:flex-end}

/* L15 offset: heavy white letters with a hard grey offset, straight over the photo */
.k-offset{font-family:var(--k-cairo);font-weight:800;line-height:1.14;color:#fff;text-shadow:.035em .04em 0 rgba(70,70,74,.85),0 .06em .3em rgba(0,0,0,.28)}
.k-offset .ln{font-size:11.5em}
.k-offset .ln+.ln{font-size:11.5em}
.k-offset .tg{font-family:var(--k-geo);font-weight:700;font-size:3.6em;background:var(--b);color:var(--f);padding:.18em .9em .24em;border-radius:99em;text-shadow:none;margin-bottom:.35em}

/* L16 calli: display letters in the brand colour on a light picture, a tilted tag above */
.k-calli{font-family:var(--k-lalezar);line-height:1.08;color:var(--b)}
.k-calli .ln{font-size:15em}
.k-calli .ln+.ln{font-size:15em}
.k-calli .tg{font-family:var(--k-geo);font-weight:700;font-size:4em;line-height:1.2;background:color-mix(in srgb,var(--s) 72%,#fff);color:var(--i);padding:.22em 1em .3em;border-radius:.7em;transform:rotate(-5deg);margin-bottom:.32em;box-shadow:0 .1em .4em rgba(0,0,0,.14)}

/* L17 script box: hand lettering in a thin glass box with corner marks */
.k-scriptbox{font-family:var(--k-ruqaa);font-weight:700;color:#fff}
.k-scriptbox .bx{position:relative;font-size:11em;line-height:1.3;padding:.14em .6em .26em;background:rgba(255,255,255,.12);border:.012em solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(.08em);backdrop-filter:blur(.08em);text-shadow:0 .03em .14em rgba(0,0,0,.3)}
.k-scriptbox .bx i{position:absolute;width:.09em;height:.09em;background:#fff}
.k-scriptbox .bx i:nth-child(1){top:-.05em;right:-.05em}.k-scriptbox .bx i:nth-child(2){top:-.05em;left:-.05em}
.k-scriptbox .bx i:nth-child(3){bottom:-.05em;right:-.05em}.k-scriptbox .bx i:nth-child(4){bottom:-.05em;left:-.05em}
.k-scriptbox .tg{font-family:var(--k-geo);font-weight:700;font-size:3.4em;margin-bottom:.4em}

/* ---------- info blocks ---------- */
/* a price list in glass capsules, the price in its own dark circle end */
.k-offers{display:grid;gap:1.3em;font-family:var(--k-cairo);color:#fff}
.k-offers .rw{display:flex;align-items:center;justify-content:space-between;gap:1.6em;min-width:52em;padding:.7em .8em .7em 2.4em;border-radius:99em;background:rgba(255,255,255,.14);border:.14em solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(.6em);backdrop-filter:blur(.6em);direction:ltr}
.k-offers .pr{order:1;display:grid;place-items:center;min-width:3.4em;padding:.28em .5em;border-radius:99em;background:color-mix(in srgb,var(--i) 76%,transparent);font-family:var(--k-poppins);font-weight:600;font-size:3.8em;line-height:1.1;direction:ltr}
.k-offers .nm{order:2;font-weight:800;font-size:3.7em;line-height:1.16;text-align:right;direction:rtl;white-space:normal}
.k-offers .nm small{display:block;font-weight:600;font-size:.72em;opacity:.92}

.k-pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--k-geo);font-weight:700;font-size:3.4em;padding:.32em .9em .38em .4em;border-radius:99em;background:var(--b);color:var(--f);box-shadow:0 .12em .4em rgba(0,0,0,.22)}
.k-pill .ico{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--s);color:var(--sf)}
.k-pill .ico svg{width:.95em;height:.95em}
.k-pill.glass{background:rgba(255,255,255,.16);color:#fff;border:.08em solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em)}
.k-pill.outline{background:transparent;color:#fff;border:.1em solid currentColor;box-shadow:none}
.k-pill.split{padding:0;overflow:hidden;gap:0}
.k-pill.split .lb{background:var(--i);color:#fff;padding:.32em .7em .38em}
.k-pill.split .vl{padding:.32em .8em .38em}
.k-row{display:flex;gap:1.6em;align-items:center;justify-content:center;flex-wrap:nowrap}

.k-grade{display:grid;place-items:center;text-align:center;width:22em;height:22em;border-radius:50%;background:var(--b);color:var(--f);box-shadow:0 .8em 2em rgba(0,0,0,.3),inset 0 0 0 .8em rgba(255,255,255,.12);font-family:var(--k-round);font-weight:800}
.k-grade b{display:block;font-size:9.5em;line-height:.9}
.k-grade small{display:block;font-size:3.6em;line-height:1.1}
.k-grade.flower{border-radius:0;background:none;box-shadow:none;position:relative}
.k-grade.flower>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 .6em 1.2em rgba(0,0,0,.3))}
.k-grade.flower>div{position:relative}
.k-grade.tilt{border-radius:1.4em;transform:rotate(8deg);width:20em;height:20em}

.k-date{position:relative;display:flex;flex-direction:column;align-items:center;font-family:var(--k-round);font-weight:800;padding:2em 3em 1.6em}
.k-date .cl{position:absolute;inset:0;background:#fff;border-radius:48% 52% 44% 56%/60% 58% 42% 40%;box-shadow:0 .8em 2em rgba(0,0,0,.18)}
.k-date .ci{position:relative;display:grid;place-items:center;width:16em;height:16em;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--s) 70%,#fff),var(--s));color:var(--i);box-shadow:inset 0 0 0 .6em rgba(255,255,255,.45),0 .5em 1.2em rgba(0,0,0,.2)}
.k-date .ci>span{display:flex;flex-direction:column;align-items:center}
.k-date .ci small{font-size:2.8em;line-height:1}
.k-date .ci b{font-family:var(--k-poppins);font-size:7.5em;line-height:.95}
.k-date .mo{position:relative;font-size:6em;color:var(--b);line-height:1.1;margin-top:.15em}
.k-date .en{position:relative;font-family:var(--k-poppins);font-weight:600;font-size:2.6em;color:var(--i);opacity:.75}

.k-clock{display:grid;place-items:center;text-align:center;width:20em;height:20em;border-radius:50%;background:var(--i);color:#fff;font-family:var(--k-round);font-weight:800;box-shadow:0 .6em 1.6em rgba(0,0,0,.35),inset 0 0 0 .7em rgba(255,255,255,.1);transform:rotate(-8deg)}
.k-clock small{display:block;font-size:4.2em;line-height:1;color:var(--s)}
.k-clock b{display:block;font-family:var(--k-poppins);font-size:9em;line-height:.9}
.k-clock i{font-style:normal;font-size:3.6em}

/* (max-content tracks: a row is never narrower than its three cells) */
.k-sched{display:grid;grid-template-columns:repeat(2,max-content);gap:1.8em 2.6em}
.k-sched.one{grid-template-columns:max-content}
.k-sched .rw{display:flex;align-items:stretch;border-radius:99em;overflow:hidden;font-family:var(--k-geo);font-weight:800;font-size:3.4em;box-shadow:0 .12em .4em rgba(0,0,0,.25)}
.k-sched .rw span{padding:.3em .8em .36em;display:flex;align-items:center}
.k-sched .d{background:var(--s);color:var(--sf)}
.k-sched .t{background:var(--i);color:#fff;font-family:var(--k-poppins)}
.k-sched .h{background:#fff;color:var(--i);font-family:var(--k-poppins);min-width:3.4em;justify-content:center}

.k-price{display:flex;align-items:flex-end;gap:1.2em;font-family:var(--k-geo);font-weight:900;color:#fff}
.k-price .n{display:flex;flex-direction:column;align-items:center;line-height:.9}
.k-price .n b{font-family:var(--k-poppins);font-size:13em}
.k-price .n small{font-size:3em;font-weight:600}
.k-price .vs{font-size:7em;font-weight:500;align-self:center}
.k-price .old b{font-size:8em;opacity:.85;text-decoration:line-through;text-decoration-color:var(--s);text-decoration-thickness:.08em}

.k-notes{position:relative;background:#fff;color:var(--i);padding:3em 3.4em 2.6em;border-radius:.4em;box-shadow:0 1em 2.6em rgba(0,0,0,.35);transform:rotate(var(--nr,-2deg));font-family:var(--k-geo);white-space:normal;min-width:34em;max-width:64em}
.k-notes::before{content:"";position:absolute;top:-1.4em;left:50%;width:9em;height:3em;transform:translateX(-50%) rotate(-3deg);background:rgba(220,220,210,.82);box-shadow:0 .2em .4em rgba(0,0,0,.12)}
.k-notes h5{margin:0 0 .3em;font-weight:900;font-size:5em;color:var(--b2,var(--i));text-align:center}
.k-notes .sw{display:block;height:1.2em;margin:0 auto 1.4em;width:60%}
.k-notes ul{list-style:none;margin:0;padding:0;display:grid;gap:1em}
.k-notes li{display:flex;gap:.6em;align-items:center;font-weight:700;font-size:3.6em}
.k-notes li::before{content:"";flex:none;width:.7em;height:.7em;background:#E8333F;clip-path:polygon(100% 50%,0 0,25% 50%,0 100%)}

.k-list{display:grid;gap:1.6em;font-family:var(--k-round);font-weight:800}
.k-list .it{display:flex;align-items:center;gap:0}
.k-list .nu{position:relative;z-index:1;display:grid;place-items:center;width:3.6em;height:3.6em;font-family:var(--k-poppins);font-size:3em;color:var(--sf)}
.k-list .nu svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.k-list .tx{background:linear-gradient(90deg,var(--b),color-mix(in srgb,var(--b) 70%,#000));color:var(--f);font-size:3.4em;padding:.4em 1.2em .45em 1em;border-radius:.3em 1.2em .3em .3em;margin-inline-start:-.8em;white-space:normal;max-width:18em;line-height:1.2}

.k-card{display:flex;gap:1em;align-items:flex-start;white-space:normal;max-width:12em;font-family:var(--k-geo);font-weight:700;font-size:3.3em;line-height:1.45;color:#fff;padding:.9em 1.1em;border-radius:1em;background:rgba(18,18,24,.55);border:.06em solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(.6em);backdrop-filter:blur(.6em);box-shadow:0 .5em 1.4em rgba(0,0,0,.3)}
.k-card .ico{flex:none;color:var(--s);margin-top:.15em}
.k-card .ico svg{width:1.3em;height:1.3em}
.k-card.bubble{background:var(--b);color:var(--f);border:0;border-radius:1em 1em 1em .2em;-webkit-backdrop-filter:none;backdrop-filter:none}
.k-card.bubble .ico{color:var(--f)}
.k-card.sticky{background:#FFE45C;color:#2B2410;border:0;border-radius:.1em;font-family:var(--k-marhey);font-weight:600;transform:rotate(-4deg);box-shadow:.2em .5em 1em rgba(0,0,0,.3);position:relative;-webkit-backdrop-filter:none;backdrop-filter:none}
.k-card.sticky .ico{color:#E8333F}

.k-cta{display:inline-flex;align-items:center;gap:.5em;font-family:var(--k-round);font-weight:800;font-size:4em;padding:.25em 1em .32em;border-radius:99em;background:var(--s);color:var(--sf);box-shadow:0 .14em .4em rgba(0,0,0,.3)}
.k-cta svg{width:1em;height:1em}
.k-cta.link{font-family:var(--k-poppins);font-weight:700;font-size:3.4em;background:var(--i);color:#fff;direction:ltr}
.k-cta.note{background:none;box-shadow:none;color:#fff;flex-direction:column;font-family:var(--k-geo);font-weight:700;font-size:3.2em;gap:.2em}

.k-year{font-family:var(--k-poppins);font-weight:800;color:#fff;direction:ltr;line-height:.92;text-align:center}
.k-year.stack{font-size:6em;display:flex;flex-direction:column}
.k-year.pill{font-size:4em;background:var(--i);padding:.12em .8em;border-radius:99em}
.k-year.tab{font-size:5.4em;writing-mode:vertical-rl;transform:rotate(180deg);background:var(--b);color:var(--f);padding:.5em .2em;border-radius:.3em .3em 0 0}

.k-hash{font-family:var(--k-geo);font-weight:700;font-size:2.8em;color:#fff;opacity:.9}
.k-hash.v{writing-mode:vertical-rl}
.k-sign-name{font-family:var(--k-vibes);font-size:7em;color:#fff;line-height:1}
.k-name{display:flex;flex-direction:column;align-items:center;line-height:1}
.k-name .ti{font-family:var(--k-ruqaa);font-weight:700;font-size:4.6em;color:var(--s2);margin-bottom:-.2em;transform:rotate(-6deg)}
.k-name .nm{font-family:var(--k-round);font-weight:800;font-size:8.6em;color:#fff;text-shadow:0 .04em .14em rgba(0,0,0,.35)}


/* decorations */
.k-deco{color:var(--s);line-height:0}
.k-deco svg{width:12em;height:12em;overflow:visible}
.k-deco.tape span{display:block;width:16em;height:4.4em;background:rgba(232,228,214,.86);box-shadow:0 .2em .5em rgba(0,0,0,.18);transform:rotate(-8deg)}

/* ---------- footers ---------- */
.k-foot{position:absolute;inset:auto 0 0 0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:3cqmin;padding:2.4cqmin 5cqmin;font-family:var(--k-geo);font-weight:600;font-size:2.5cqmin;color:#fff;direction:rtl;white-space:nowrap}
.k-foot .gr{display:flex;align-items:center;gap:1.6cqmin}
.k-foot .it{display:inline-flex;align-items:center;gap:.9cqmin;direction:ltr;unicode-bidi:isolate}
.k-foot .it.ar{direction:rtl}
.k-foot svg{width:1.25em;height:1.25em;flex:none}
.k-foot .so{display:inline-flex;gap:.7cqmin}
.k-foot .so i{display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--fb,#fff);color:var(--ff,#111)}
.k-foot .so i svg{width:1em;height:1em}
.k-foot .bn{font-weight:800;font-size:1.05em}
.k-foot.wave{padding-top:7cqmin;color:var(--i);--fb:var(--i);--ff:#fff}
.k-foot.wave::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;clip-path:ellipse(78% 100% at 50% 100%)}
.k-foot.wave.curve::before{clip-path:polygon(0 38%,10% 28%,24% 20%,40% 16%,56% 17%,72% 22%,86% 30%,100% 40%,100% 100%,0 100%)}
.k-foot.bar{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.35));-webkit-backdrop-filter:blur(.6cqmin);backdrop-filter:blur(.6cqmin)}
.k-foot.cols{justify-content:space-around;align-items:flex-start;padding-bottom:3cqmin}
.k-foot.cols .it{flex-direction:column;gap:.6cqmin;text-align:center}
.k-foot.cols .it svg{width:1.6em;height:1.6em}
.k-foot.line{justify-content:center;gap:2.2cqmin;padding-bottom:2cqmin;font-size:2.3cqmin}
.k-foot .bdg{display:block;height:3.2cqmin;width:auto;border-radius:.6cqmin}
.k-foot.strip{padding:2cqmin 3cqmin 2.2cqmin;font-size:2.15cqmin;font-weight:500;text-shadow:0 .1em .5em rgba(0,0,0,.55)}
.k-foot.strip .rw{flex:1;justify-content:center;gap:2.2cqmin}
.k-foot.strip .so i,.k-foot.split .so i{background:transparent;color:inherit}
.k-foot.split{align-items:flex-end;padding:2.2cqmin 4.4cqmin 2.8cqmin;font-size:2.35cqmin;font-weight:600;text-shadow:0 .1em .5em rgba(0,0,0,.4)}
.k-foot .gr.col{flex-direction:column;align-items:flex-start;gap:1cqmin}
.k-foot .gr.col.end{align-items:flex-end}
.k-foot .gr.bds{gap:1cqmin}
.dz.a-tall .k-foot{inset:auto 0 17.7cqh 0}
.dz.a-wide .k-foot,.dz.a-banner .k-foot{font-size:2.6cqh}

/* ---------- photo effects (layers between the picture and the content) ---------- */
.k-fx{position:absolute;inset:0;pointer-events:none}
.k-fx.scrim-bottom{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 26%,rgba(0,0,0,0) 52%)}
.k-fx.scrim-top{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%)}
.k-fx.scrim-right{background:linear-gradient(270deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 62%)}
.k-fx.scrim-left{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 62%)}
.k-fx.tint{background:linear-gradient(160deg,color-mix(in srgb,var(--ac) 38%,transparent),transparent 45%,color-mix(in srgb,var(--ac) 30%,transparent));mix-blend-mode:soft-light}
.k-fx.leak{background:radial-gradient(60% 45% at 100% 0%,rgba(255,170,70,.55),rgba(255,120,40,0) 70%),radial-gradient(40% 35% at 0% 100%,rgba(255,80,140,.32),transparent 70%);mix-blend-mode:screen}
.k-fx.prism{background:linear-gradient(115deg,transparent 30%,rgba(255,0,80,.22) 38%,rgba(255,200,0,.22) 42%,rgba(0,255,140,.2) 46%,rgba(0,160,255,.22) 50%,rgba(170,0,255,.2) 54%,transparent 62%);filter:blur(2cqmin);mix-blend-mode:screen;opacity:.85}
.k-fx.rays{background:repeating-conic-gradient(from 200deg at 85% -10%,rgba(255,240,200,.14) 0deg 3deg,transparent 3deg 9deg);-webkit-mask:radial-gradient(90% 90% at 85% 0%,#000,transparent 75%);mask:radial-gradient(90% 90% at 85% 0%,#000,transparent 75%);mix-blend-mode:screen}
.k-fx.vignette{background:radial-gradient(120% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}
.k-fx.glow{background:radial-gradient(50% 30% at 50% 72%,color-mix(in srgb,var(--ac) 55%,transparent),transparent 70%);mix-blend-mode:screen}
.k-fx.grain{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:24cqmin;mix-blend-mode:overlay;opacity:.5}
.k-fx.halftone{background-image:radial-gradient(rgba(255,255,255,.22) 22%,transparent 24%);background-size:2.2cqmin 2.2cqmin;-webkit-mask:linear-gradient(200deg,#000,transparent 40%);mask:linear-gradient(200deg,#000,transparent 40%)}
.k-fx.bokeh{background:radial-gradient(3cqmin 3cqmin at 12% 18%,rgba(255,230,170,.5),transparent),radial-gradient(5cqmin 5cqmin at 86% 26%,rgba(255,255,255,.28),transparent),radial-gradient(4cqmin 4cqmin at 8% 62%,rgba(255,200,120,.35),transparent),radial-gradient(6cqmin 6cqmin at 92% 70%,rgba(255,255,255,.2),transparent),radial-gradient(2.4cqmin 2.4cqmin at 30% 8%,rgba(255,255,255,.4),transparent);filter:blur(.5cqmin);mix-blend-mode:screen}
.k-fx.geo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='white' stroke-opacity='.5' stroke-width='1.2'%3E%3Cpath d='M40 6l9 25 25 9-25 9-9 25-9-25-25-9 25-9z'/%3E%3Crect x='22' y='22' width='36' height='36' transform='rotate(45 40 40)'/%3E%3C/g%3E%3C/svg%3E");background-size:12cqmin;opacity:.12}
.k-fx.echo{display:grid;place-items:center;font-family:var(--k-round);font-weight:800;font-size:34cqmin;line-height:.85;color:transparent;-webkit-text-stroke:.35cqmin rgba(255,255,255,.22);white-space:nowrap;overflow:hidden;text-align:center}
.k-fx.letters{font-family:var(--k-reemfun);font-size:46cqmin;line-height:1;color:rgba(255,255,255,.06);overflow:hidden;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4cqmin}

.k-fx.fade-brand{background:linear-gradient(0deg,color-mix(in srgb,var(--kb) 92%,transparent) 0%,color-mix(in srgb,var(--kb) 55%,transparent) 15%,transparent 34%)}
.k-fx.fade-light{background:linear-gradient(0deg,rgba(255,255,255,.9),transparent 30%)}
.k-fx.ghost{display:flex;flex-direction:column;justify-content:center;font-family:var(--k-lalezar);font-size:30cqmin;line-height:1;color:color-mix(in srgb,var(--kb) 14%,transparent);white-space:nowrap;overflow:hidden}
.k-fx.ghost.r{align-items:flex-start;padding-inline-start:0}
.k-fx.ghost.l{align-items:flex-end}

/* editor: the face area the composition keeps clear, shown while editing */
.dz.editing .k-face{position:absolute;z-index:8;pointer-events:none;border:2px dashed rgba(255,214,0,.85);border-radius:40%;box-shadow:0 0 0 100vmax rgba(0,0,0,0);opacity:0;transition:opacity .15s}
.dz.editing:has(.L.drag) .k-face{opacity:1}