/* Kanguinn · Garden: the site's one look (adopted for good on Oct 10 2026). Loaded on every page; look.js and the
   pages' own markup always set html[data-look="garden"], so every rule here applies everywhere (the older
   stylesheets underneath are the base it overrides). Light only: warm cream page, pale stone tiles,
   olive for actions. One card family (.kc) shared by the hub, the blog and the section pages.
   Type (Aziz, round 3): Thmanyah Serif Display for Arabic titles; Thmanyah Sans for Arabic reading and interface;
   Onest for every Latin letter and digit. */

/* ---- fonts. ONE family for the whole site (Aziz, round 4): 'Kg Font' = Onest for Latin and Western digits,
   Thmanyah Sans for Arabic (and Arabic-Indic digits). Every token below points at it, so changing the site's font is
   one edit here. Latin carries size-adjust so English sits at the Arabic size. */
/* Every weight range is declared for BOTH scripts. The browser picks one weight range first and only then looks at
   unicode-range, so a range that only had Latin (or only Arabic) faces sent the other script to a system font (Arabic
   at 400 came out in DejaVu Sans, Latin at 700 in Inter). Same ranges for both = one composite font per weight. */
/* Round 11: four Arabic weights (Light 300, Regular 400, Medium 500, Bold 700), each range mirrored for Onest (variable). */
@font-face{font-family:'Kg Font';src:url('/fonts/garden/thmanyahsans-Light.woff2') format('woff2');font-weight:100 349;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/thmanyahsans-Regular.woff2') format('woff2');font-weight:350 449;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/garden/thmanyahsans-Medium.woff2') format('woff2');font-weight:450 599;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/thmanyahsans-Bold.woff2') format('woff2');font-weight:600 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:100 349;font-display:swap;size-adjust:94%;unicode-range:U+0000-002F,U+003A-02FF,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:350 449;font-display:swap;size-adjust:94%;unicode-range:U+0000-002F,U+003A-02FF,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:450 599;font-display:swap;size-adjust:94%;unicode-range:U+0000-002F,U+003A-02FF,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:600 900;font-display:swap;size-adjust:94%;unicode-range:U+0000-002F,U+003A-02FF,U+1E00-1EFF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:100 349;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:350 449;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:450 599;font-display:swap;unicode-range:U+0030-0039}
@font-face{font-family:'Kg Font';src:url('/fonts/onest.woff2') format('woff2');font-weight:600 900;font-display:swap;unicode-range:U+0030-0039}

/* ---- tokens (light; the owner's dark theme is below, html[data-theme="dark"], set by look.js) */
html[data-look="garden"]{
  /* round 11: neutral grey, no blue or yellow cast (design-spec R11.1) */
  --bg:#FDFDFD; --tile:#F6F6F7; --tile-2:#F0F1F2; --sand:#E9EAEC; --paper:#FFFFFF; --sage-wash:#F0F1F2;
  --ink:#111315; --ink-2:#3A3D41; --ink-3:#6B6F75;
  --olive:#111315; --moss:#000000; --sage:#DADCDF; --clay:#9A5A36;
  --line:#ECEDEF; --line-2:#DADCDF; --scrim:rgba(10,12,14,.30);
  --r-card:8px; --r-inner:6px; --r-chip:6px; --r-ctl:6px; --r-pill:999px; --r-s:6px; --r-m:8px; --r-l:8px; --r-s2:6px; --r-l2:8px; --ctl-r:6px;
  --sh-lift:0 12px 24px -14px rgba(15,20,25,.30); --sh-pop:0 14px 32px -14px rgba(15,20,25,.28),0 0 0 1px var(--line);
  --ease:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.3,1.35,.5,1);
  --d1:160ms; --d2:320ms; --d3:420ms; --d-pan:900ms;
  --font:'Kg Font',Tahoma,system-ui,sans-serif; --f-title:var(--font); --f-read:var(--font); --f-ui:var(--font);
  --gut:32px; --gap:12px; --pad:18px;
  /* the names the older stylesheets use, mapped onto the new palette */
  --card:var(--tile); --field:#FFFFFF; --fg:var(--ink); --muted:var(--ink-2); --tint:var(--sand); --tint-fg:var(--moss);
  --gold:var(--olive); --on-gold:#fff; --gold-text:var(--olive); --trail:var(--line-2); --shadow:rgba(15,20,25,.18); --danger:#A4442B;
  --canvas:#FFFFFF; --canvas-line:var(--line); --rule:var(--line); --stage:var(--tile-2);
  --ar:var(--f-ui); --en:var(--f-ui); --display:var(--f-title); --ar-serif:var(--f-read);
  --live:#111315; --live-text:#111315; --stone:var(--line-2); --read-ar:20px; --read-en:19px;
  /* tags (R11.1): small, desaturated hues; colour lives only here, never on a whole card */
  --tag-filter:#E3EEDB; --tag-filter-ink:#2F4A1E; --tag-espresso:#E6E4F6; --tag-espresso-ink:#2E2B66; --tag-now:#F6E3D4; --tag-now-ink:#6B3410;
  --tag-perfume:#F1E3EC; --tag-perfume-ink:#5A2E4A; --tag-other:#DDEEF7; --tag-other-ink:#1E4A6B;
  --g-sudoku:#2E8B57; --g-sudoku-ink:#1F6B43; --g-sudoku-wash:#DDEFE2;
  --cc-bg:var(--tile); --cc-back:var(--paper);
  --cc-filter:var(--tag-filter); --cc-filter-ink:var(--tag-filter-ink); --cc-espresso:var(--tag-espresso); --cc-espresso-ink:var(--tag-espresso-ink); --cc-now:var(--tag-now); --cc-now-ink:var(--tag-now-ink);
  --cc-perfume:var(--tag-perfume); --cc-perfume-ink:var(--tag-perfume-ink); --cc-product:var(--tag-other); --cc-product-ink:var(--tag-other-ink); --cc-other:var(--tag-other); --cc-other-ink:var(--tag-other-ink);
  --mood-accent:var(--clay);
  color-scheme:light;
}
@media (max-width:1199px){html[data-look="garden"]{--gap:10px;--pad:16px}}
@media (max-width:999px){html[data-look="garden"]{--gut:24px}}
@media (max-width:767px){html[data-look="garden"]{--gut:24px;--gap:8px;--pad:14px;--read-ar:18px;--read-en:17px}}
/* phones (R11.2): one column, a gutter that grows with the screen (360 → 25, 390 → 27, 430 → 30), cards 8 apart, 16 inside */
@media (max-width:599px){html[data-look="garden"]{--gut:clamp(20px,7vw,32px);--pad:16px}}

/* ---- base */
html[data-look="garden"] body{font-family:var(--f-ui);background:var(--bg);color:var(--ink)}
html[data-look="garden"] :is(h1,h2,h3,.sec-name,.tool-text h2,.door h2,.lockup-text,.title,.ed-title,.sd-done-in h2){font-family:var(--f-title);font-weight:500;letter-spacing:0}
/* 12t: every page's main heading is in the wordmark's face, Thmanyah Sans Bold (the article title and the editor's title too) */
html[data-look="garden"] body :is(h1,.ed-title){font-weight:700}
html[data-look="garden"] .cc-name{line-height:1.2;overflow-wrap:anywhere}
/* the one family on every element, html included (inheriting on <html lang="en"> would fall back to the browser serif) */
html[data-look="garden"],html[data-look="garden"] :lang(en){font-family:var(--font)}
html[data-look="garden"] :focus-visible{outline:2px solid var(--olive);outline-offset:3px}
/* the writing surface is a page, not a control: no ring around it while typing */
html[data-look="garden"] :is(.ProseMirror,.ed-title,.ed-sub,[contenteditable]):focus,html[data-look="garden"] :is(.ProseMirror,[contenteditable]):focus-visible{outline:none!important;box-shadow:none!important}
html[data-look="garden"] .wrap{max-width:calc(1184px + 2 * var(--gut));padding-inline:var(--gut)}
html[data-look="garden"] :is(.btn.gold,.sec-btn.gold){background:var(--olive);color:#fff!important;border-color:var(--olive)}
html[data-look="garden"] .kicker{color:var(--olive)}

/* ---- header (round 4, Chester-like, mirrored for RTL): the section tabs at the start (right) in one light tab
   group, "كانقوين" as type in the centre, and at the end (left) the account and the penguin mark alone, which opens
   /penguin/. One structure for the static pages (.acts) and the Journal (.top-start is dissolved into the bar).
   No border at rest, a hairline once the page scrolls. */
html:not([data-look="garden"]) :is(.kg-word,.kg-pen){display:none!important}
html[data-look="garden"] .top{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:0;box-shadow:0 1px 0 transparent;transition:box-shadow var(--d1) ease}
html[data-look="garden"] .top.is-scrolled{box-shadow:0 1px 0 var(--line)}
html[data-look="garden"] .top > .wrap{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;min-height:64px;gap:10px}
html[data-look="garden"] .top > .wrap > .top-start{display:contents}
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav){order:1}
html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions){order:3;margin-inline-start:auto;gap:8px}
html[data-look="garden"] .top > .wrap .brand{order:4;flex:none}
html[data-look="garden"] .top > .wrap > .sec-actions{display:none!important}
/* the centre is Aziz's own Arabic wordmark (an inline SVG in currentColor), not text */
html[data-look="garden"] .kg-word{order:2;display:flex;align-items:center;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 4px;line-height:0;color:var(--ink);text-decoration:none;transition:color var(--d1) ease}
html[data-look="garden"] .kg-word:hover{color:var(--moss)}
.kg-wordmark{display:block;height:24px;width:auto;fill:currentColor;overflow:visible}
/* the logo mark alone, the same size as the controls beside it */
html[data-look="garden"] .top > .wrap .brand{gap:0;color:var(--ink);text-decoration:none;width:36px;height:36px;justify-content:center}
html[data-look="garden"] .brand::after{content:none!important}
html[data-look="garden"] .brand-mark{width:28px;height:28px}
html[data-look="garden"] .top > .wrap .brand .mark,html[data-look="garden"] .top > .wrap .brand svg.mark{width:28px;height:28px;stroke-width:3.2}
html[data-look="garden"] .brand:hover .mark{color:var(--moss);transform:none}
/* Lyric Studio keeps its own bar (not shared): its section links stay quiet text with the current one underlined */
html[data-look="garden"] :is(.nav,.site-nav){gap:20px}
html[data-look="garden"] :is(.nav,.site-nav) a{position:relative;padding:14px 0;border-radius:0;background:none!important;color:var(--ink-2)!important;font:700 15px/1 var(--f-ui);transition:color var(--d1) ease}
html[data-look="garden"] :is(.nav,.site-nav) a:hover,html[data-look="garden"] :is(.nav,.site-nav) a[aria-current="page"]{color:var(--ink)!important}
html[data-look="garden"] :is(.nav,.site-nav) a[aria-current="page"]::after{content:'';position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--ink)}
/* section tabs: one hairline box, small type, the current section in ink on the tile */
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav){display:flex;gap:2px;padding:3px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 60%,transparent);box-shadow:0 1px 2px rgba(15,20,25,.06)}
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a{position:relative;display:flex;align-items:center;height:30px;padding:0 12px!important;border-radius:0;background:none!important;color:var(--ink-3)!important;font:400 14px/1 var(--font)!important;text-decoration:none;transition:color var(--d1) ease,background-color var(--d1) ease}
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a:hover{color:var(--ink)!important;background:color-mix(in srgb,var(--tile) 60%,transparent)!important}
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a[aria-current="page"]{color:var(--ink)!important;background:var(--tile-2)!important;font-weight:500!important}
html[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a[aria-current="page"]::after{content:none}
/* round controls in the bar: the pencil (owner only) and the account, small */
html[data-look="garden"] .icon-btn{width:36px;height:36px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:transparent;color:var(--ink-2)}
html[data-look="garden"] .icon-btn:hover{background:var(--tile);border-color:var(--line-2);color:var(--ink)}
html[data-look="garden"] .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html[data-look="garden"] .kg-pen:not([hidden]){display:inline-grid;place-items:center;flex:none;border-color:transparent;color:var(--ink-3)}
html[data-look="garden"] .kg-pen:hover{color:var(--ink);border-color:var(--line-2)}
html[data-look="garden"] :is(.acc-chip,.acct summary){width:36px;height:36px;padding:0!important;gap:0;justify-content:center;border-color:transparent;background:transparent}
html[data-look="garden"] :is(.acc-chip,.acct summary):hover,html[data-look="garden"] .acct[open] summary,html[data-look="garden"] .acc-chip[aria-expanded="true"]{background:var(--tile);border-color:var(--line-2)}
html[data-look="garden"] :is(.acc-chip span,.acct-name){display:none!important}
html[data-look="garden"] :is(.acc-chip i,.acct summary .acct-pic){width:28px;height:28px;font-size:13px;background-color:var(--sand)}
html[data-look="garden"] #account,html[data-look="garden"] .acct-slot{position:relative;display:flex}
/* the account menu: you, your profile, sign out. Glass, a hairline, no rounded corners */
html[data-look="garden"] :is(.acc-menu,.acct-menu){position:absolute;z-index:40;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;min-width:220px;padding:6px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 18px 40px -22px rgba(15,20,25,.45);animation:none}
html[data-look="garden"] :is(.acc-menu,.acct-menu)[hidden]{display:none}
html[data-look="garden"] :is(.acc-menu,.acct-menu) :is(a,button){min-height:40px;padding:0 10px;font:500 14px/1 var(--font);color:var(--ink);background:none}
html[data-look="garden"] :is(.acc-menu,.acct-menu) :is(a,button):hover{background:color-mix(in srgb,var(--tile) 80%,transparent)}
html[data-look="garden"] .acc-me{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
html[data-look="garden"] .acc-me :is(i,.acct-pic){flex:none;width:36px;height:36px;display:grid;place-items:center;overflow:hidden;border-radius:50%!important;background:var(--sand);color:var(--ink);font:700 15px/1 var(--font);font-style:normal}
html[data-look="garden"] .acc-me :is(i,.acct-pic) img{width:100%;height:100%;object-fit:cover;border-radius:50%!important}
html[data-look="garden"] .acc-me b{font:700 15px/1.3 var(--font);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-look="garden"] .sec-actions{border:1px solid var(--line);border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg) 80%,transparent)}
html[data-look="garden"] .sec-btn{border-radius:var(--r-pill);font:700 14px var(--f-ui)}
/* phones: the name and the controls on the first line, the tabs as a full-width row under them; the bar scrolls away */
/* phones (and narrow tablets, where the tabs would reach the centre): two rows. First row: the owner's tools at the
   start, the wordmark in the centre, the account and the penguin at the end; the tabs as a full-width row under it. */
@media (max-width:719px){
  html[data-look="garden"] .top{position:relative}
  html[data-look="garden"] .top > .wrap{flex-wrap:wrap;min-height:0;padding-block:8px 10px;row-gap:8px;gap:4px}
  html[data-look="garden"] .kg-word{top:26px}
  html[data-look="garden"] .kg-wordmark{height:20px}
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions){display:contents}
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > *{order:1}
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > :is(#account,.acct-slot){order:2;margin-inline-start:auto}
  html[data-look="garden"] .top > .wrap .brand{order:3}
  html[data-look="garden"] .top > .wrap :is(.nav,.site-nav){order:4;flex:1 0 100%;justify-content:space-between}
  html[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a{flex:1;justify-content:center;padding:0 4px!important;font-size:14px!important}
}

/* ---- footer: footprints, the penguin on its dune, one quiet row */
html[data-look="garden"] .foot{margin-top:80px;color:var(--ink-3);font-size:13px}
html[data-look="garden"] .foot .trail{width:min(1184px,100% - 2 * var(--gut));margin-inline:auto;height:30px;color:var(--ink-3);opacity:.4}
html[data-look="garden"] .foot-row{padding-block:20px 32px;align-items:baseline}
html[data-look="garden"] .foot-credit{font-size:13px;color:var(--ink-3)}
html[data-look="garden"] .foot-credit b{font:700 18px/1.3 var(--f-title);color:var(--ink)}
html[data-look="garden"] .foot-links{gap:18px}
html[data-look="garden"] .foot-links a{font-size:14px;color:var(--ink-2);text-decoration:none}
html[data-look="garden"] .foot-links a:hover{color:var(--ink)}
.kg-sign{display:flex;justify-content:center;padding:24px 16px 0;color:var(--ink-3,#6A5F4F);animation:kgSignIn .6s ease-out both}
.kg-sign svg{width:120px;height:56px;display:block}
@keyframes kgSignIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.kg-sign{animation:none}}

html[data-look="garden"] .mood{--card:var(--bg)}
html[data-look="garden"] .gk-h2,html[data-look="garden"] .tools-head{font:500 24px/1.35 var(--f-title);color:var(--ink);margin:40px 0 16px}
@media (max-width:767px){
  html[data-look="garden"] .gk-h2,html[data-look="garden"] .tools-head{font-size:21px;margin:32px 0 12px}
}

/* الورشة in the garden look: the same tiles as the hub, flat, no outlines, no lift */
html[data-look="garden"] .tools{gap:var(--gap);padding-bottom:0;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
html[data-look="garden"] .tool,html[data-look="garden"] .soon-tool{border:0!important;border-radius:var(--r-card);background:var(--tile);animation:none;box-shadow:none!important;transform:none!important}
html[data-look="garden"] .tool-art{border:0!important;background:var(--sage-wash)!important;padding:20px}
html[data-look="garden"] .soon-tool .tool-art{background:var(--sand)!important}
html[data-look="garden"] .tool.studio .tool-art::after{display:none}
html[data-look="garden"] .tool .tool-art .mood{color:var(--ink);--card:var(--bg)}
html[data-look="garden"] .tool-text{padding:var(--pad);gap:8px}
html[data-look="garden"] .tool h2{font-size:24px;line-height:1.3}
html[data-look="garden"] .tool p{font-size:15px;line-height:1.8;color:var(--ink-2);opacity:1}
html[data-look="garden"] :is(.door-tag,.tool.studio .door-tag),html[data-look="garden"] .soon-tool .chip{height:22px;padding:0 7px;border:0;border-radius:4px;background:var(--tag-other);color:var(--tag-other-ink);font:500 12px/22px var(--f-ui);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tag-other-ink) 14%,transparent)}
html[data-look="garden"] .soon-tool .chip{background:var(--tag-now);color:var(--tag-now-ink)}
html[data-look="garden"] .door-go{color:var(--olive);font-size:15px}
html[data-look="garden"] .projects{margin-top:0}

/* ---- the card family. A card is one tile on the page: no border, no resting shadow. It never moves or
   changes size; only its children move, inside its clip. --h is 1 while it's hovered (fine pointers) or
   keyboard-focused, and every variant reads it. */
.kc{--h:0;position:relative;display:block;min-width:0;overflow:hidden;isolation:isolate;contain:paint;border-radius:var(--r-card,12px);background:var(--tile,#F2EDE3);color:var(--ink,#28231C);text-decoration:none;-webkit-tap-highlight-color:transparent}
.kc:focus-visible{--h:1;outline:2px solid var(--olive,#111315);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.kc:hover{--h:1}}
article.kc{cursor:default}
.kc-label{position:absolute;z-index:3;inset-block-start:14px;inset-inline:var(--pad,18px) calc(var(--pad,18px) + 24px);font:400 13px/1.5 var(--f-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-arrow{position:absolute;z-index:3;inset-block-start:17px;inset-inline-end:var(--pad,18px);width:14px;height:14px;fill:none;stroke:color-mix(in srgb,var(--ink) calc(var(--h) * 100%),var(--ink-3));stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transform:translate(calc(var(--h) * -2px),calc(var(--h) * -2px));transition:transform var(--d2) var(--ease),stroke var(--d1) ease}
.kc-chip{display:inline-flex;align-items:center;height:22px;padding-inline:8px;border-radius:var(--r-chip,6px);background:var(--sand);color:var(--ink-2);font:700 12px/1 var(--f-ui);white-space:nowrap}
.kc-chip.is-ready{background:var(--tag-other);color:var(--tag-other-ink)}
.kc-chip.is-soon{background:var(--tag-now);color:var(--tag-now-ink)}
.kc-chip.is-sample{position:absolute;z-index:4;inset-block-start:12px;inset-inline-end:var(--pad);background:var(--bg);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line-2)}
.kc-chips{display:flex;flex-wrap:wrap;gap:6px}
.kc-title{margin:0;font:700 24px/1.3 var(--f-title);color:color-mix(in srgb,var(--moss) calc(var(--h) * 100%),var(--ink));transition:color var(--d2) ease}
.kc-title > span{background:linear-gradient(var(--olive),var(--olive)) no-repeat right bottom/calc(var(--h) * 100%) 1.5px;transition:background-size var(--d2) var(--ease)}
.kc-sub{margin:0;font:400 15px/1.8 var(--f-ui);color:var(--ink-2)}
.kc-meta{margin:0;font:400 13px/1.5 var(--f-ui);color:var(--ink-3)}
.kc-clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;padding-bottom:.32em;margin-bottom:-.32em}
.kc-clamp4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;padding-bottom:.32em;margin-bottom:-.32em}
.kc-body{position:absolute;z-index:2;inset-inline:var(--pad);inset-block-end:var(--pad);display:flex;flex-direction:column;gap:6px;text-align:right}
/* user text carries dir=auto; the card keeps one edge, so English titles line up with Arabic ones */
.kc-cap,.kc-feature-text{text-align:right}
.kc.is-sample .kc-label{inset-inline-end:calc(var(--pad) + 52px)}

/* note: the title grows an underline */
.kc-note .kc-body{gap:4px}
.kc-note .kc-title{-webkit-line-clamp:3}
.kc-note .kc-sub{margin-top:6px}
.kc-note[data-span="2"] .kc-title,.kc-note.is-wide .kc-title{font-size:30px}
.kc-note[data-span="2"] .kc-body{max-width:34em}

/* feature: text half + the cover bleeding to the card's edges; hover pans the cover */
.kc-note.is-feature{display:grid;grid-template-columns:1fr 1fr}
.kc-feature-text{position:relative;min-width:0}
.kc-note.is-feature .kc-body{inset-inline:20px;inset-block-end:20px;gap:6px}
.kc-note.is-feature .kc-title{font-size:30px}
.kc-note.is-feature .kc-sub{margin-top:0;font-size:16px;color:var(--ink-2)}
.kc-note.is-feature .kc-label,.kc-note.is-feature .kc-arrow{inset-inline-start:20px}
.kc-note.is-feature .kc-arrow{inset-inline-start:auto;inset-inline-end:20px}
.kc-cover{position:relative;overflow:hidden;background:var(--sand)}
.kc-cover img{position:absolute;inset-block:0;left:0;width:104%;max-width:none;height:100%;object-fit:cover;object-position:50% 45%;transform:translateX(calc(var(--h) * -3%));transition:transform var(--d-pan) var(--ease)}

/* photo: edge to edge; on hover the photo slides down and a category strip shows above it */
.kc-photo{background:var(--tile)}
.kc-reveal{position:absolute;z-index:1;inset:0 0 auto;height:40px;display:flex;align-items:center;padding-inline:var(--pad) calc(var(--pad) + 22px);font:400 13px/1 var(--f-ui);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:var(--h);transform:translateY(calc((1 - var(--h)) * -8px));transition:opacity var(--d2) ease 60ms,transform var(--d2) var(--ease) 60ms}
.kc-reveal .kc-arrow{inset-block-start:13px}
.kc-media{position:absolute;z-index:2;inset:0;transform:translateY(calc(var(--h) * 40px));transition:transform var(--d3) var(--ease)}
.kc-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.kc-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,14,.30) 0,rgba(10,12,14,.12) 22%,transparent 40%);pointer-events:none}
.kc-cap{position:absolute;z-index:1;inset-inline:14px;inset-block-end:14px;display:flex;flex-direction:column;gap:2px;color:#fff;transform:translateY(calc(var(--h) * -40px));transition:transform var(--d3) var(--ease)}
/* the words stay where they were while the photo slides; the scrim goes with them */
.kc-media::after{transform:translateY(calc(var(--h) * -40px));transition:transform var(--d3) var(--ease)}
.kc-cap b{font:700 18px/1.3 var(--f-title)}
.kc-cap span{font:400 13px/1.5 var(--f-ui);color:rgba(255,255,255,.85)}
.kc-touch{display:none;position:absolute;z-index:3;inset-block-start:12px;inset-inline-start:12px;background:color-mix(in srgb,var(--sand) 90%,transparent);color:var(--ink-2)}
@media (hover:none){.kc-touch{display:inline-flex}}

/* object: the thing comes forward, the words step back */
.kc-object{background:var(--tile)}
.kc-obj{position:absolute;z-index:2;inset-block-start:13%;inset-inline-end:-3%;height:50%;width:auto;max-width:52%;transform:translate(calc(var(--h) * -6px),calc(var(--h) * -8px)) scale(calc(1 + var(--h) * .06)) rotate(calc(var(--h) * -2deg));filter:drop-shadow(0 calc(var(--h) * 12px) calc(var(--h) * 12px) rgba(52,40,22,calc(var(--h) * .22)));transition:transform var(--d3) var(--ease),filter var(--d3) var(--ease)}
.kc-obj :is(path,rect,circle,ellipse,line,polyline){vector-effect:non-scaling-stroke}
.kc-object .kc-body{z-index:1;opacity:calc(1 - var(--h) * .4);transform:translateY(calc(var(--h) * 4px));transition:opacity var(--d2) ease,transform var(--d2) var(--ease)}
.kc-object .kc-title{max-width:58%;overflow-wrap:anywhere}
.kc-object .kc-meta{font-size:14px}
.kc-object[data-span="2"] .kc-obj{height:80%;inset-block-start:10%;inset-inline-end:6%;max-width:46%}
.kc-object[data-span="2"] .kc-body{inset-inline-end:50%;inset-block-end:auto;top:50%;translate:0 -50%}

/* cover: a book or a film poster leans toward the words */
.kc-cover-v{background:var(--tile)}
.kc-book{position:absolute;z-index:2;inset-inline-start:18px;inset-block-start:52px;height:58%;aspect-ratio:2/3;border-radius:4px;overflow:hidden;box-shadow:0 1px 2px rgba(40,30,15,.25),0 calc(var(--h) * 12px) calc(var(--h) * 24px) calc(var(--h) * -14px) rgba(52,40,22,.30);transform-origin:50% 100%;transform:translateY(calc(var(--h) * -6px)) rotate(calc(var(--h) * -3deg));transition:transform var(--d3) var(--ease-spring),box-shadow var(--d3) var(--ease)}
.kc-book img{width:100%;height:100%;object-fit:cover;display:block}
.kc-book.is-type{container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;padding:12% 10% 10%;background:var(--olive);color:#FAF7F1}
.kc-book.is-type.is-clay{background:var(--clay)}
.kc-book.is-type b{font:700 max(8px,14cqi)/1.35 var(--f-title)}
.kc-book.is-type small{font:400 max(7px,9.5cqi)/1.4 var(--f-ui);opacity:.85;border-top:1px solid rgba(250,247,241,.45);padding-top:6px}
.kc-cover-v .kc-body{inset-inline-start:calc(18px + 38.7% + 14px);gap:4px}
.kc-cover-v .kc-chip:not(.is-sample){align-self:flex-start;transform:translateY(calc(var(--h) * -2px));transition:transform var(--d2) var(--ease)}
.kc-cover-v .kc-title{font:700 16px/1.45 var(--f-ui);margin-top:4px}
.kc-cover-v .kc-meta{font-size:14px}

/* tool: the penguin in the drawing turns to you */
.kc-tool{background:var(--sage-wash)}
.kc-art{position:absolute;inset:0 0 38%;display:grid;place-items:center;padding:36px var(--pad) 0}
.kc-art .mood{width:auto;height:100%;max-height:150px;max-width:100%;color:var(--ink);--card:var(--bg);transform:translateY(calc(var(--h) * -4px));transition:transform var(--d3) var(--ease);animation:none}
.kc-art .mood .peng{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(calc(var(--h) * -6deg));transition:transform var(--d3) var(--ease-spring)}
.kc-tool .kc-body{gap:4px}
.kc-tool .kc-chip{align-self:flex-start;margin-bottom:4px}
.kc-tool .kc-name{font:700 16px/1.45 var(--f-ui);color:var(--ink)}
.kc-tool .kc-line{font:400 14px/1.6 var(--f-ui);color:var(--ink-2)}
.kc-tool[data-span="2"] .kc-art{inset:0 50% 0 0;padding:24px}
.kc-tool[data-span="2"] .kc-body{inset-inline-end:50%}
.kc-tool.is-soon{background:var(--tile)}
.kc-soon-list{position:absolute;inset-inline:var(--pad);inset-block-end:var(--pad);display:flex;flex-direction:column}
.kc-soon-list > div{display:flex;align-items:center;gap:12px;padding-block:10px}
.kc-soon-list > div + div{border-top:1px solid var(--line)}
.kc-soon-list .mood{flex:none;width:auto;height:40px;color:var(--ink);--card:var(--bg);animation:none}
.kc-soon-list b{display:block;font:700 15px/1.4 var(--f-ui)}
.kc-soon-list small{display:block;font:400 13px/1.5 var(--f-ui);color:var(--ink-3)}
.kc-tool.is-soon[data-span="2"] .kc-soon-list{flex-direction:row;gap:16px}
.kc-tool.is-soon[data-span="2"] .kc-soon-list > div{flex:1}
.kc-tool.is-soon[data-span="2"] .kc-soon-list > div + div{border-top:0}

/* sudoku: a real board, 1px lines; it lifts and pencils in a mark */
.kc-sudoku{background:var(--sage-wash)}
.kgrid > .kc:not(.is-feature){container:kc/size}
.kc-sudoku .kc-label b{font-weight:400;color:var(--ink-3)}
.kc-sd{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px var(--pad) 14px}
.kc-board{--bw:min(72cqw,calc(100cqh - 100px));width:var(--bw);aspect-ratio:1;flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;padding:1.5px;background:var(--ink-3);border-radius:var(--r-inner);overflow:hidden;transform:translateY(calc(var(--h) * -4px));transition:transform var(--d3) var(--ease)}
.kc-board > span{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2)}
.kc-board i{display:grid;place-items:center;background:var(--bg);font:600 calc(var(--bw) * .061)/1 var(--font),system-ui;font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);position:relative}
.kc-board i.pm{background:color-mix(in srgb,var(--sage) calc(var(--h) * 45%),var(--bg));transition:background-color var(--d2) ease}
.kc-board i.pm::after{content:'·';color:var(--ink-3);opacity:var(--h);transition:opacity var(--d2) ease;font-size:1.4em}
.kc-board.is-empty{opacity:.4}
.kc-sd-line{font:400 13px/1.5 var(--f-ui);color:var(--ink-2);text-align:center}
.kc-sudoku[data-span="2"] .kc-sd{flex-direction:row-reverse;justify-content:space-between;padding:40px var(--pad) var(--pad)}
.kc-sudoku[data-span="2"] .kc-board{--bw:min(46cqw,calc(100cqh - 64px))}
.kc-sudoku[data-span="2"] .kc-sd-line{text-align:start;align-self:flex-end}
@container kc (max-width:200px){
  .kc-board{--bw:min(74cqw,calc(100cqh - 48px))}
  .kc-board i{font-size:0}
  .kc-board i.g::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
  .kc-sd{padding-top:34px;padding-bottom:10px}
  .kc-sd-line{display:none}
}

/* small 1×1 cells (phones): only the essentials */
@container kc (max-width:250px){
  .kc-title{font-size:18px;line-height:1.35}
  .kc-chips .kc-chip + .kc-chip{display:none}
  .kc-obj{height:44%;inset-block-start:34px}
  .kc-object .kc-title{max-width:66%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-bottom:.32em;margin-bottom:-.32em}
  .kc-tool .kc-line{display:none}
  .kc-tool .kc-body .kc-chip{display:none}
  .kc-art{inset:0 0 30%;padding-top:34px}
  .kc-soon-list > div{padding-block:6px;gap:8px}
  .kc-soon-list small{display:none}
  .kc-soon-list .mood{height:26px}
  .kc-soon-list b{font-size:13.5px}
  .kc-book{inset-inline-start:50%;translate:50% 0;inset-block-start:34px;height:46%}
  .kc-cover-v .kc-body{inset-inline-start:var(--pad);gap:0}
  .kc-cover-v .kc-body .kc-chip{display:none}
  .kc-cover-v .kc-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kc-cover-v .kc-meta{font-size:12.5px}
  .kc-note .kc-sub{display:none}
}

/* reduced motion: nothing moves; only colour and opacity change */
@media (prefers-reduced-motion:reduce){
  .kc *,.kc *::before,.kc *::after{transform:none!important;transition-property:opacity,color,background-color,stroke,fill!important;transition-duration:var(--d1)!important;transition-delay:0s!important}
  .kc-reveal{z-index:3;background:var(--tile)}
  .kc-obj{filter:drop-shadow(0 calc(var(--h) * 8px) calc(var(--h) * 10px) rgba(52,40,22,calc(var(--h) * .22)))}
}

/* grids that hold cards on section pages (the hub's own grid lives in preview.css) */
.kc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap,12px)}
.kc-list > .kc{min-height:240px}
.kc-list > .kc-note .kc-body{position:relative;inset:auto;padding:56px var(--pad) var(--pad);min-height:240px;justify-content:flex-end}
.kc-list > .kc-note.is-feature{grid-column:1 / -1;min-height:0;height:clamp(300px,calc((min(100vw,1184px + 2 * var(--gut)) - 2 * var(--gut) - 2 * var(--gap)) / 3),400px)}
.kc-list > .kc-note.is-feature .kc-body{position:absolute;inset-inline:20px;inset-block-end:20px;padding:0;min-height:0}
@media (min-width:768px){.kc-list > .kc-note.is-wide{grid-column:span 2}}
@media (max-width:999px){.kc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .kc-list{grid-template-columns:minmax(0,1fr)}
  .kc-list > .kc{min-height:220px}
  .kc-list > .kc-note .kc-body{min-height:220px}
  .kc-list > .kc-note.is-feature,.kc-note.is-feature.is-auto{height:auto;display:flex;flex-direction:column-reverse}
  .kc-note.is-feature .kc-cover{aspect-ratio:16/10;flex:none}
  .kc-note.is-feature .kc-feature-text{min-height:170px}
  .kc-list > .kc-note.is-feature .kc-body,.kc-note.is-feature.is-auto .kc-body{position:relative;inset:auto;padding:48px 16px 16px}
  .kc-note.is-feature .kc-title{font-size:24px;line-height:1.35}
  .kc-title{font-size:21px;line-height:1.35}
  .kc-sub{font-size:14.5px;line-height:1.75}
  .kc-label{font-size:12.5px}
  .kc-cap b{font-size:16px}
  .kc-tool .kc-name,.kc-cover-v .kc-title{font-size:15px}
}

/* ---- writing cards (hub + blog list). Round 11 (R11.3 #4): the label row is its own 40px band («<category> ·
   المدونة» + ↖), always visible; the cover starts under it and fades only over its last 28%; title, date and the
   first words under it. No flip. Desktop hover pans the cover a little, underlines the title and nudges the arrow. */
.kc-post{container-type:size;background:var(--tile);display:flex;flex-direction:column}
.kc-post > .kc-lab{position:relative;flex:none}
/* the cover takes whatever the words leave (52% at most), so the title never runs over it at any cell size */
.kc-pimg{position:relative;z-index:0;flex:0 1 52%;min-height:22%;max-height:52%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.5) 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0 72%,rgba(0,0,0,.5) 86%,transparent 100%)}
.kc-pimg img{display:block;width:100%;height:100%;object-fit:cover;object-position:calc(50% - var(--h) * 4%) 40%;transition:object-position var(--d-pan) var(--ease)}
.kc-ptext{position:relative;z-index:1;flex:none;margin-top:auto;padding:4px 20px 20px;display:flex;flex-direction:column;gap:0;text-align:right;min-height:0;overflow:hidden}
.kc-post:not(.has-img) .kc-ptext{flex:0 1 auto}
.kc-ptitle{margin:0;font:500 22px/1.35 var(--font);color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;padding-bottom:.32em;margin-bottom:-.32em;overflow-wrap:anywhere;
  text-decoration:underline 1px;text-underline-offset:5px;text-decoration-color:color-mix(in srgb,var(--ink) calc(var(--h) * 100%),transparent);transition:text-decoration-color var(--d2) ease}
.kc-pdate{margin:4px 0 0;font:400 13px/1.5 var(--font);color:var(--ink-3)}
.kc-pex{margin:8px 0 0;font:400 15px/1.75 var(--font);color:var(--ink-2);display:block;--pl:3;overflow:hidden}
.kc-post.has-img .kc-pex{--pl:2}
/* 13z (Aziz): excerpts end with «…» after the last whole word that fits (look.js trims them; the browser's own «…» ate
   the first letter of an English word at the end of an Arabic line) */
.kc-pex{max-height:calc(var(--pl,3) * 1lh)}
.kc-post.has-img .kc-ptitle{-webkit-line-clamp:2}
.kc-post .kc-lab{color:var(--ink-3)}
.kc-post:is(:hover,:focus-visible) .kc-go{color:var(--ink)}
@container (max-width:250px){
  .kc-ptitle{font-size:17px;line-height:1.4}
  .kc-pex{font-size:13.5px;line-height:1.65;--pl:3}
  .kc-post.has-img .kc-pex{display:none}
  .kc-ptext{padding:4px 14px 14px}
}
@container (max-height:230px){.kc-post.has-img .kc-pex{display:none}}
@container (max-height:420px){.kc-post.has-img .kc-pex{--pl:2}}
/* the blog list: a clean grid of these cards, latest first, 4/3/2/1 columns by width */
.kc-posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap,12px)}
.kc-posts > .kc-post{aspect-ratio:1}
@media (max-width:1199px){.kc-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){.kc-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones (R11.2): one column; a writing card is a flow of label band → cover 16:10 → words, its height from its content */
@media (max-width:599px){
  .kc-posts{grid-template-columns:minmax(0,1fr);gap:8px}
  :is(.kc-posts,.kgrid) > .kc-post{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;container-type:inline-size}
  :is(.kc-posts,.kgrid) > .kc-post .kc-lab{position:relative;flex:none;inset:auto}
  :is(.kc-posts,.kgrid) > .kc-post .kc-pimg{position:relative;inset:auto;height:auto;aspect-ratio:16/10;flex:none;transform:none!important}
  :is(.kc-posts,.kgrid) > .kc-post .kc-ptext{position:relative;inset:auto;max-height:none!important;padding:0 20px 20px}
  :is(.kc-posts,.kgrid) > .kc-post.has-img .kc-ptext{padding-top:4px}
  :is(.kc-posts,.kgrid) > .kc-post:not(.has-img) .kc-ptext{padding-top:28px}
  :is(.kc-posts,.kgrid) > .kc-post .kc-ptitle{font-size:21px;-webkit-line-clamp:3}
  :is(.kc-posts,.kgrid) > .kc-post .kc-pex{display:block;--pl:2}
}

/* ---- the blog in the garden look */
html[data-look="garden"] .view > .tag-filter{margin-bottom:16px}
html[data-look="garden"] .sub-band{border:0;background:var(--tile);border-radius:var(--r-card);margin-top:40px}

/* ---- an article sits on the page: no box around it */
html[data-look="garden"] .article{max-width:680px;margin:24px auto 32px;padding:16px 0 24px;background:none!important;border:0;border-radius:0;box-shadow:none}
html[data-look="garden"] .article h1.title{font:700 42px/1.3 var(--f-title)}
html[data-look="garden"] .article .subtitle{font:400 20px/1.7 var(--f-ui);color:var(--ink-2)}
html[data-look="garden"] .article .byline{font-family:var(--f-ui);font-size:13px;color:var(--ink-3)}
html[data-look="garden"] .article .cover{border-radius:var(--r-card)}
html[data-look="garden"] .prose{font-family:var(--f-read);font-size:var(--read-ar);line-height:2;color:var(--ink)}
html[data-look="garden"] .article[dir="ltr"] .prose{font-size:var(--read-en);line-height:1.8}
html[data-look="garden"] .prose :is(h2,h3,h4){font-family:var(--f-title);font-weight:500}
html[data-look="garden"] .prose h2{font-size:28px;line-height:1.4;margin-top:48px}
html[data-look="garden"] .prose h3{font-size:22px;line-height:1.45;margin-top:36px}
html[data-look="garden"] .prose a{color:var(--olive)}
html[data-look="garden"] .prose blockquote{border-inline-start:2px solid var(--sage);font-family:var(--f-title)}
@media (min-width:1000px){html[data-look="garden"] .article .cover{margin-inline:-80px}}
@media (max-width:767px){
  html[data-look="garden"] .article{margin-top:12px}
  html[data-look="garden"] .article h1.title{font-size:30px;line-height:1.35}
  html[data-look="garden"] .article .subtitle{font-size:17px}
  html[data-look="garden"] .prose{line-height:1.95}
}

/* the first design's theme buttons stay gone; the owner's sun/moon switch (.kg-dark-sw) replaced them */
#themeBtn,#themeToggle{display:none!important}

/* round 2 review fixes */
.spell-btn{position:relative}.spell-btn::before{content:'';position:absolute;inset:-5px 0}
/* workshop: a lone project spans the row as a wide card (art beside text) instead of leaving two empty cells */
@media (min-width:768px){
  html[data-look="garden"] .projects > .tool:only-of-type{grid-column:1 / -1;flex-direction:row;align-items:stretch}
  html[data-look="garden"] .projects > .tool:only-of-type .tool-art{flex:0 0 42%;aspect-ratio:auto;border-bottom:0}
  html[data-look="garden"] .projects > .tool:only-of-type .tool-text{justify-content:center;padding:28px 32px}
}

/* ---- corners (round 5, Aziz): rounded again, smaller than the first design. Corners come from what a thing IS, not
   from whichever older stylesheet drew it (those carry ~250 hand-picked radii, 4px to 23px and pills):
     boxes: cards, tiles, panels, dialogs, pictures in a box ......... 8px  (--r-card)
     controls: chips, buttons, tabs, inputs, selects, menus, toasts ... 6px  (--r-ctl)
     avatars: a circle; the Kanguinn switch: a pill
   Anything without one of those roles has no corner of its own (the zero below sits at zero specificity and the role
   lists sit in :where(), so the circles and pills after them win): sudoku cells and the board, calendar days, table cells, hairlines, progress and range tracks, the
   pictures inside a card (the card clips them), the lyric card itself. Pseudo-elements (switch knobs, dots) keep theirs. */
:where(html[data-look="garden"]) *{border-radius:0!important}
html[data-look="garden"] :where(.kc,.cc,.cc-face,.cc-back,.cc-in,.door,.tool,.soon-tool,.pc,.pcard,.sub-band,.pa-tile,.article .cover,.mini-card,
  dialog,.kg-edit,.sheet,.panel,.profile,.lib-card,.sd-clock,.sd-who,.sd-cal-wrap,.sd-arch,.sd-done-in,.sd-paused,.sd-done,.gate,.empty,
  .coffee-log .card,.ed-panel,.kinds-panel,.picked,.workspace,.lcard,.photo-strip img,.song-photos img,.prose img,.prose figure,.hc-img,.cover:not(.kc *)){border-radius:var(--r-card)!important}
html[data-look="garden"] :where(button,.btn,.chip,.sec-btn,.sec-actions,.icon-btn,.kc-chip,.tag,.cc-tag,.hc-chip,.door-tag,.kind-tag,.seg,.seg-ind,.pill,
  input:not([type="range"],[type="checkbox"],[type="radio"],[type="color"]),select,textarea,summary,.search,
  .nav,.site-nav,.nav a,.site-nav a,.acc-menu,.acct-menu,.gear-menu,.share-pop,.pa-pop,.kg-menu,[role="menu"],[role="listbox"],.results,.toast,.sd-toast,.kh-flash,
  .kh-bar,.kh-ctl,.kh-ctl button,.kh-btn,.player,.preset-sw,.ph-tile,.line-option,.confirm,.sd-levels,kbd,.cc-filter button,.sd-num,.sd-tool,.ab,.sd-switch):not(.sd-cell,.sd-day){border-radius:var(--r-ctl)!important}
html[data-look="garden"] .kh-sizes button{border-radius:4px!important}
html[data-look="garden"] :is(.acc-chip i,.acc-chip i img,.acc-me i,.acc-me i img,.acct-pic,.acct-pic img,.account-btn .avatar,.account-btn .avatar img,.profile-pic,.profile-pic img,.avatar,.avatar img){border-radius:50%!important}
html[data-look="garden"] :is(.spell-btn .dot,.cr-switch i,[role="switch"] .kg-sw,.sd-switch .knob,.live-dot,.dot-live){border-radius:999px!important}
/* dots, knobs and the few drawn circles (the penguin's floe and ice cream, spinners, status dots, round play buttons) */
html[data-look="garden"] :is(.floe,.scoops i,.mail-state i,.status-pill i,.rc-dot,.rc-n,.hc-meter i,.sd-legend .started,.spinner,.live i,.audio-pill .ap-play,.player .play,.sc-btn){border-radius:50%!important}
html[data-look="garden"] .floe{background:color-mix(in srgb,var(--sand) 85%,transparent)}
/* rounded boxes clip what they hold */
html[data-look="garden"] :is(.tool,.soon-tool,.pc,.pcard){overflow:hidden}

/* round 11: no generic scale-up. Each card variant has its own content-specific hover (below and in preview.css /
   hobbies.css); the card box itself never transforms. Section-page tiles that have no variant of their own only deepen
   their surface a touch. */
@media (hover:hover) and (pointer:fine){html[data-look="garden"] :is(.door,.tool,.pc):hover{background-color:var(--tile-2)}}
html[data-look="garden"] :is(.gear-menu,.share-pop,.pa-pop,.kg-menu){background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-look="garden"] *{font-family:var(--font)}
html[data-look="garden"] :is(code,pre,kbd,samp){font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* round 5: sticker images (a transparent cut-out traced with a thick outline). Contract: hobby details.sticker = true,
   details.outline = a colour (default #FFFFFF). Set --ol on the element; the outline is 8 hard drop-shadows plus a soft one. */
.kg-sticker{--ol:#FFFFFF;--ow:4px;filter:drop-shadow(var(--ow) 0 0 var(--ol)) drop-shadow(calc(var(--ow) * -1) 0 0 var(--ol)) drop-shadow(0 var(--ow) 0 var(--ol)) drop-shadow(0 calc(var(--ow) * -1) 0 var(--ol)) drop-shadow(0 6px 10px rgba(15,20,25,.18))}

/* ---- Lyric Studio: the site's header (.ls-top, same structure and rules as every page) and the studio's own bar
   under it: its name at the start, the Editor / My cards switch at the end. kanguinn.css drew the old bar as a grid. */
html[data-look="garden"] .top.ls-top{display:block;padding:env(safe-area-inset-top,0px) 0 0;gap:0;border-bottom:0}
html[data-look="garden"] .ls-top > .wrap{margin-inline:auto;box-sizing:border-box;width:100%}
html[data-look="garden"] .ls-top .site-nav a[aria-current="page"]{color:var(--ink)!important}
html[data-look="garden"] .ls-top #download{min-height:36px;height:36px;padding:0 12px;gap:6px;font-size:14px}
html[data-look="garden"] .ls-top #download svg{width:18px;height:18px}
html[data-look="garden"] .ls-top .account-btn{width:36px;min-height:36px;height:36px;padding:0;gap:0;justify-content:center;border-color:transparent;background:transparent}
html[data-look="garden"] .ls-top .account-btn:hover{background:var(--tile);border-color:var(--line-2)}
html[data-look="garden"] .ls-top .account-btn .avatar{width:28px;height:28px}
html[data-look="garden"] .ls-top .account-label{display:none}
html[data-look="garden"] .ls-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1500px;margin:8px auto 0;padding-inline:24px;box-sizing:border-box}
@media (max-width:1020px){html[data-look="garden"] .ls-bar{padding-inline:14px}}
html[data-look="garden"] .ls-bar .studio-name{display:flex;align-items:baseline;gap:10px;padding:0;border:0;color:var(--ink);text-decoration:none;white-space:nowrap;min-width:0}
html[data-look="garden"] .ls-bar .studio-name b{font:700 22px/1.3 var(--font)}
html[data-look="garden"] .ls-bar .studio-name small{font:400 14px/1.3 var(--font);color:var(--ink-3)}
html[data-look="garden"] .ls-bar .views{flex:none}
@media (max-width:719px){
  html[data-look="garden"] .ls-top > .wrap > .top-actions > #accountButton{order:2;margin-inline-start:auto}
  html[data-look="garden"] .ls-top #download span{display:none}
  html[data-look="garden"] .ls-bar .studio-name b{font-size:19px}
  html[data-look="garden"] .ls-bar .studio-name small{display:none}
}

/* =====================================================================================================
   Round 6 (Aziz): card labels, the header's owner tools, the owner's dark theme
   ===================================================================================================== */

/* ---- header. Left (the end, in RTL): only the account and the penguin. Right: the section tabs, and for the owner
   «غرفة الكتابة» (a lightbulb) beside them, outside their group, like a special tab of the blog. The sun/moon switch
   (owner only) sits right before the avatar. Both come from look.js / the page's account code. */
html[data-look="garden"] .kg-pen{display:none!important}
.kg-write[hidden]{display:none!important}
html[data-look="garden"] .top > .wrap .kg-write{order:1;flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border:1px dashed var(--line-2);color:var(--ink-2);font:500 14px/1 var(--font);text-decoration:none;white-space:nowrap;transition:color var(--d1) ease,background-color var(--d1) ease,border-color var(--d1) ease}
html[data-look="garden"] .top > .wrap .kg-write:hover{color:var(--ink);border-style:solid;background:color-mix(in srgb,var(--tile) 60%,transparent)}
html[data-look="garden"] .top > .wrap .kg-write[aria-current="page"]{color:var(--ink);border-style:solid;border-color:var(--line-2);background:var(--tile);font-weight:700}
html[data-look="garden"] .kg-write svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html[data-look="garden"] .kg-write:hover svg path:last-child{fill:color-mix(in srgb,var(--clay) 28%,transparent)}
/* the sun/moon switch: a 44×28 pill of sky with a horizon; the wheel turns half a circle (look.js toggles aria-checked) */
html[data-look="garden"] .kg-dark-sw{border-radius:50%!important}
.kg-dark-sw{--sky:#F6C64B;--sun:#FFFFFF;--moon:#F2F5FA;position:relative;flex:none;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--sky);cursor:pointer;overflow:hidden;transition:background-color .5s ease,box-shadow .2s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.kg-dark-sw[aria-checked="true"]{--sky:#2C2D32}
.kg-dark-sw svg{display:block;width:32px;height:32px}
.kg-dark-sw .wheel{transform-box:view-box;transform-origin:16px 30px;transform:rotate(0deg);transition:transform .56s cubic-bezier(.45,.05,.25,1)}
.kg-dark-sw[aria-checked="true"] .wheel{transform:rotate(180deg)}
.kg-dark-sw .sun circle{fill:var(--sun)}
.kg-dark-sw .sun .rays{fill:none;stroke:var(--sun);stroke-width:1.6;stroke-linecap:round}
.kg-dark-sw .moon circle{fill:var(--moon)}
.kg-dark-sw .moon .bite{fill:var(--sky);transition:fill .5s ease}
.kg-dark-sw .stars circle{fill:#FFFFFF;opacity:0;transition:opacity .3s ease}
.kg-dark-sw[aria-checked="true"] .stars circle{opacity:.85;transition:opacity .4s ease .3s}
.kg-dark-sw:hover{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.kg-dark-sw:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.kg-dark-sw,.kg-dark-sw *{transition:none!important}}
/* colours ease across for a moment when the theme changes (look.js adds .kg-theming for ~650ms; never with reduced motion) */
html.kg-theming body,html.kg-theming :is(.top,.kc,.tool,.cc-face,.foot,main,.article,.panel,.workspace,.btn,.icon-btn,.nav,.site-nav,.kg-write){transition:background-color .45s ease,color .45s ease,border-color .45s ease!important}
/* phones (and narrow tablets): row 1 = owner's tools at the start, the wordmark in the centre, then the switch, the
   avatar and the penguin at the end; the tabs get their own row */
@media (max-width:719px){
  html[data-look="garden"] .top > .wrap .kg-write{order:1;height:32px;padding:0 9px}
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > .kg-dark-sw{order:2;margin-inline-start:auto}
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > .kg-dark-sw + :is(#account,.acct-slot,#accountButton){margin-inline-start:0}
}
/* …and on phones his «غرفة الكتابة» joins the tabs' row, right after them, so the first row stays light */
@media (max-width:719px){
  html.kg-owner[data-look="garden"] .top > .wrap :is(.nav,.site-nav){flex:1 0 calc(100% - 46px)}
  html.kg-owner[data-look="garden"] .top > .wrap .kg-write{order:4;width:38px;height:38px;justify-content:center;padding:0}
  html.kg-owner[data-look="garden"] .top > .wrap .kg-write span{display:none}
  html.kg-owner[data-look="garden"] .top > .wrap > .top-actions > .icon-btn.txt{width:30px}
}
@media (max-width:420px){html[data-look="garden"] .top > .wrap .kg-write span{display:none}html[data-look="garden"] .top > .wrap .kg-write{width:36px;justify-content:center;padding:0}}
/* the owner on narrow tablets (720–899): the tabs plus his button would reach the wordmark, so his header takes the
   phone's two rows (visitors keep one row) */
@media (min-width:720px) and (max-width:899px){
  html.kg-owner[data-look="garden"] .top > .wrap{flex-wrap:wrap;min-height:0;padding-block:8px 10px;row-gap:8px;gap:6px}
  html.kg-owner[data-look="garden"] .kg-word{top:26px}
  html.kg-owner[data-look="garden"] .top > .wrap > :is(.acts,.top-actions){display:contents}
  html.kg-owner[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > *{order:1}
  html.kg-owner[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > .kg-dark-sw{order:2;margin-inline-start:auto}
  html.kg-owner[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > :is(#account,.acct-slot,#accountButton){order:2}
  html.kg-owner[data-look="garden"] .top > .wrap .brand{order:3}
  html.kg-owner[data-look="garden"] .top > .wrap :is(.nav,.site-nav){order:4;flex:1 0 100%;justify-content:space-between}
  html.kg-owner[data-look="garden"] .top > .wrap :is(.nav,.site-nav) a{flex:1;justify-content:center}
}
/* tablets: the tabs and the owner's button would reach the wordmark, so the button goes icon-only first */
@media (min-width:720px) and (max-width:1099px){
  html[data-look="garden"] .top > .wrap .kg-write span{display:none}
  html[data-look="garden"] .top > .wrap .kg-write{width:34px;justify-content:center;padding:0}
}

/* ---- card labels (Chester-like): "<type> · <section>" at the top of each card, the arrow at the far end.
   Words-only cards show it always. Cards led by a big picture (a post cover, a hobby photo) keep the picture filling
   the top at rest; on hover/focus the picture slides down ~38px inside the card's clip and the label shows in the bar
   it uncovers. On touch it's always shown (the picture rests lower); with reduced motion only opacity changes. */
.kc-lab{position:absolute;z-index:3;inset:0 0 auto;height:40px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline:var(--pad,18px) calc(var(--pad,18px) - 2px);font:400 13px/1.5 var(--font);color:var(--ink-3);pointer-events:none;transition:color var(--d1) ease}
.kc-lab-in{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-go{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:translate(calc(var(--h) * -2px),calc(var(--h) * -2px));transition:transform var(--d2) var(--ease)}
.kc:is(:hover,:focus-visible) .kc-lab{color:var(--ink-2)}
.kc-hob.is-photo{--rv:var(--h)}
@media (hover:none){.kc-hob.is-photo{--rv:1}}
.kc-hob.is-photo .kc-lab{opacity:var(--rv);transform:translateY(calc((1 - var(--rv)) * -6px));transition:opacity var(--d2) ease 40ms,transform var(--d2) var(--ease) 40ms,color var(--d1) ease}
.kc-hob.is-photo .kc-pimg{transform:translateY(calc(var(--rv) * 38px));transition:transform var(--d3) var(--ease)}
@media (prefers-reduced-motion:reduce){
  .kc-hob.is-photo .kc-lab{background:color-mix(in srgb,var(--tile) 90%,transparent)}
  .kc-pimg img{transition:none}
}
/* words-only cards keep their words clear of the label */
.kc-post:not(.has-img) .kc-ptext{max-height:calc(100% - 40px - 20px)}
.kc-post:not(.has-img) :is(.kc-ptitle,.kc-pdate){flex:none}
.kc-post:not(.has-img) .kc-pex{min-height:0;flex:0 1 auto}
@container (max-height:250px){.kc-post:not(.has-img) .kc-pex{--pl:3}}
@container (max-height:205px){.kc-post:not(.has-img) .kc-pex{--pl:2}.kc-post:not(.has-img) .kc-ptitle{-webkit-line-clamp:2}}
@container (max-height:185px){.kc-post:not(.has-img) .kc-pex{display:none}}
/* the owner's phone header holds one more control (the switch): the wordmark steps down a little */
@media (max-width:420px){html.kg-owner[data-look="garden"] .kg-wordmark{height:17px}html.kg-owner[data-look="garden"] .top > .wrap{gap:2px}}
/* the old top labels are replaced by .kc-lab */
.kgrid > .kc > .kc-label{display:none}

/* the owner's dark theme lives in dark.css (12u: four neutral looks; the navy of round 6 is gone) */

/* round 8: the left cluster (switch, avatar, penguin) sits on one 32px line with even 12px gaps */
html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions){gap:12px;align-items:center}
html[data-look="garden"] .top > .wrap .brand{width:32px;height:32px;margin-inline-start:2px;display:inline-flex;align-items:center}
html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > *{align-self:center}
/* round 8: the audio player always sits in the middle of the column */
html[data-look="garden"] :is(.prose,.ProseMirror) :is(.player,.audio-pill){width:min(100%,420px);margin-inline:auto}
html[data-look="garden"] :is(.prose,.ProseMirror) :is(.player,.audio-pill).al-start{margin-inline:0 auto}
html[data-look="garden"] :is(.prose,.ProseMirror) :is(.player,.audio-pill).al-end{margin-inline:auto 0}
.audio-pill .ap-align{display:none;gap:2px;flex:none}
.ProseMirror .audio-pill:hover .ap-align,.ProseMirror .audio-pill:focus-within .ap-align,.ProseMirror .audio-pill.ProseMirror-selectednode .ap-align{display:inline-flex}
.audio-pill .ap-align button{width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-3,var(--muted));cursor:pointer}
.audio-pill .ap-align button[aria-pressed="true"]{background:var(--ink,var(--fg));color:var(--bg)}
@media (hover:none){.ProseMirror .audio-pill .ap-align{display:inline-flex}}
/* end of an article (12t: no footprints here, they live only in the footer): some room, then even steps between tiles, ice cream and the link */
html[data-look="garden"] .post-foot{gap:24px!important;padding-top:30px}
/* round 9: no green anywhere. "Live/published" states use the site's own accent, in both themes */
html[data-look="garden"] .status-pill.live{background:color-mix(in srgb,var(--olive) 12%,var(--tile))!important;color:var(--ink)!important}
html[data-look="garden"] .status-pill.live i,html[data-look="garden"] .mail-state.ok i{background:var(--olive)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--olive) 18%,transparent)!important;animation:none!important}
html[data-look="garden"] .pc.live .badge{background:color-mix(in srgb,var(--olive) 12%,transparent)!important;color:var(--ink)!important}
html[data-look="garden"] .shelf.published h2 svg{stroke:var(--ink-2)!important}
html[data-look="garden"]{--live:var(--olive);--live-text:var(--ink);--lichen:var(--ink-2)}

/* =====================================================================================================
   Round 11 (design-spec R11.3): the card family's own surfaces and content-specific hovers. Hover rules only apply
   to fine pointers (and keyboard focus) through --h; the card box never transforms; reduced motion keeps colour and
   opacity only (the .kc * rule above).
   ===================================================================================================== */
/* 5 · project / tool (C03): one tile surface, the label row, and a framed "screen" that bleeds off the end and bottom */
.kc-tool,.kc-tool.is-soon{background:var(--tile)}
.kc-frame{position:absolute;z-index:1;inset-block-start:56px;inset-inline-start:24px;inset-inline-end:-1px;inset-block-end:-14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 20px 30px;
  background:var(--paper);border-start-start-radius:6px!important;box-shadow:0 0 0 1px var(--line),0 2px 6px -2px rgba(15,20,25,.08);
  transform:translate(calc(var(--h) * -6px),calc(var(--h) * -8px));transition:transform var(--d3) var(--ease),box-shadow var(--d3) ease}
.kc:is(:hover,:focus-visible) .kc-frame{box-shadow:0 0 0 1px var(--line),var(--sh-lift)}
.kc-frame .kc-art{position:relative;inset:auto;flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;padding:4px 0 8px}
.kc-frame .kc-art .mood{height:100%;max-height:min(62%,150px);max-height:150px;width:auto;max-width:100%}
.kc-frame .kc-name{font:500 18px/1.3 var(--font);color:var(--ink)}
.kc-frame .kc-line{font:400 14px/1.6 var(--font);color:var(--ink-2)}
.kc-frame .kc-chip{position:absolute;inset-block-start:12px;inset-inline-end:14px;height:22px;padding-inline:7px;border-radius:4px!important;font:500 12px/1 var(--font)}
.kgrid > .kc-tool .kc-frame .kc-chip{display:inline-flex}
.kgrid > .kc-tool[data-w="2"] .kc-frame{inset-inline-start:40%;inset-block-start:56px}
.kgrid > .kc-tool[data-w="2"][data-h="1"] .kc-frame .kc-line{display:none}
@container kc (max-width:250px){.kc-frame{inset-inline-start:16px;padding:12px 14px 24px}.kc-frame .kc-line{display:none}.kc-frame .kc-name{font-size:15px}.kc-frame .kc-chip{display:none!important}}
@container kc (max-height:250px){.kc-frame .kc-line{display:none}}
/* 6 · game: the green wash, a paper board, the line in the game's ink */
.kc-sudoku{background:var(--g-sudoku-wash)}
.kc-board{background:var(--ink-3)}
.kc-board i{background:var(--paper)}
.kc-board i.pm{background:color-mix(in srgb,var(--g-sudoku) calc(var(--h) * 18%),var(--paper))}
.kc-sudoku .kc-lab,.kc-sudoku .kc-sd-line > span{color:var(--g-sudoku-ink)}
.kc-sd-line b{font-weight:500}
/* labels: 13/1.5, weight 400 */
.kc-lab{font-weight:400}
/* r11 review: articles keep the page gutter on phones */
@media (max-width:767px){html[data-look="garden"] .article{padding-inline:var(--gut,clamp(20px,7vw,32px))}}

/* round 11b (Aziz): writing cards with a cover are a full picture again. The «… · المدونة ↖» label is no band:
   it sits on the picture in white over a soft top shade, hidden at rest and sliding down with a fade on hover/focus
   (always shown on touch; with reduced motion it only fades). */
html[data-look="garden"] .kc-post.has-img{--rv:var(--h)}
@media (hover:none){html[data-look="garden"] .kc-post.has-img{--rv:1}}
html[data-look="garden"] :is(.kgrid,.kc-posts) > .kc-post.has-img > .kc-lab,html[data-look="garden"] .kc-post.has-img > .kc-lab{position:absolute;inset:0 0 auto;z-index:3;height:56px;align-items:flex-start;padding-top:12px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);background:linear-gradient(to bottom,rgba(10,14,20,.30),rgba(10,14,20,0));opacity:var(--rv);transform:translateY(calc((1 - var(--rv)) * -10px));transition:opacity .36s ease,transform .46s var(--ease,cubic-bezier(.2,.8,.2,1))}
html[data-look="garden"] .kc-post.has-img:is(:hover,:focus-visible) > .kc-lab{color:#fff}
html[data-look="garden"] .kc-post.has-img .kc-pimg{flex-basis:60%;max-height:62%;min-height:30%}
@media (prefers-reduced-motion:reduce){html[data-look="garden"] .kc-post.has-img > .kc-lab{transform:none}}
/* «سجل الهوايات» on الهوايات: a green sprout whose two leaves open a little on hover */
html[data-look="garden"] .kg-write.kg-hlog{color:#1F6B43;border-color:color-mix(in srgb,#2E8B57 45%,transparent)}
html[data-look="garden"] .kg-write.kg-hlog svg{stroke:#2E8B57;overflow:visible}
html[data-look="garden"] .kg-write.kg-hlog .lf{fill:color-mix(in srgb,#2E8B57 22%,transparent);transform-box:fill-box;transition:transform .45s cubic-bezier(.2,.8,.2,1),fill .3s ease}
html[data-look="garden"] .kg-write.kg-hlog .lf.l{transform-origin:100% 100%}
html[data-look="garden"] .kg-write.kg-hlog .lf.r{transform-origin:0 100%}
html[data-look="garden"] .kg-write.kg-hlog:hover .lf{fill:#2E8B57}
html[data-look="garden"] .kg-write.kg-hlog:hover .lf.l{transform:rotate(-8deg) scale(1.08)}
html[data-look="garden"] .kg-write.kg-hlog:hover .lf.r{transform:rotate(8deg) scale(1.08)}
@media (prefers-reduced-motion:reduce){html[data-look="garden"] .kg-write.kg-hlog .lf{transition:none}}
/* سجل الهوايات: room above the heading, and between the heading and its line */
html[data-look="garden"] .coffee-log{padding-top:clamp(28px,5vw,48px)}
html[data-look="garden"] .coffee-log .dash-head h1{margin:0;line-height:1.25}
html[data-look="garden"] .coffee-log .dash-head p{margin:10px 0 0}
html[data-look="garden"] .coffee-log .dash-head{margin-bottom:28px}
/* round 11e (Aziz): the studio card on the home is one clean surface — no inner panel. Label on top, the drawing
   centred in the space left, name and line at the bottom; wide cells put the drawing beside the words. */
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon) .kc-frame{inset:40px 0 0 0;padding:4px 20px 18px;gap:10px;align-items:stretch;background:none;box-shadow:none!important;border-radius:0!important;transform:none}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon) .kc-frame .kc-chip{display:none!important}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon) .kc-frame .kc-art{position:relative;inset:auto!important;flex:1 1 auto;min-height:0;width:100%;padding:0!important;display:grid;place-items:center;transform:translateY(calc(var(--h) * -4px));transition:transform var(--d3,.42s) var(--ease,ease)}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon) .kc-frame .kc-art .mood{height:100%;max-height:150px;width:auto;max-width:100%}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon) .kc-ftext{display:flex;flex-direction:column;gap:2px;flex:none;text-align:start}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="1"] .kc-frame{inset-inline-start:0;flex-direction:row;align-items:center;gap:24px;padding:4px 24px 20px}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="1"] .kc-ftext{flex:1 1 50%;align-self:flex-end}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="1"] .kc-frame .kc-art{flex:1 1 50%;height:100%}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="1"] .kc-frame .kc-line{display:block}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-h="2"] .kc-frame .kc-art .mood{max-height:220px}
@media (prefers-reduced-motion:reduce){html[data-look="garden"] .kgrid > .kc-tool .kc-frame .kc-art{transform:none;transition:none}}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="2"] .kc-frame{inset-inline-start:0;padding:8px 28px 26px}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="2"] .kc-name{font-size:24px}
html[data-look="garden"] .kgrid > .kc-tool:not(.is-soon)[data-w="2"][data-h="2"] .kc-frame .kc-art .mood{max-height:260px}
/* Aziz (12b): «غرفة الكتابة» / «سجل الهوايات» look exactly like the tabs' pill — same height, border, corners, shadow, type */
html[data-look="garden"] .top > .wrap .kg-write{height:38px;padding:0 14px;border:1px solid var(--line-2)!important;border-radius:var(--r-ctl,6px)!important;background:color-mix(in srgb,var(--bg) 60%,transparent);box-shadow:0 1px 2px rgba(15,20,25,.06);color:var(--ink-2);font:400 14px/1 var(--font)!important}
html[data-look="garden"] .top > .wrap .kg-write:hover{border-style:solid;background:color-mix(in srgb,var(--tile) 60%,var(--bg))}
html[data-look="garden"] .top > .wrap .kg-write[aria-current="page"]{font-weight:500!important;background:var(--tile)}
html[data-look="garden"] .top > .wrap .kg-write.kg-hlog{border-color:var(--line-2)!important}
@media (max-width:767px){html.kg-owner[data-look="garden"] .top > .wrap .kg-write{width:38px;padding:0}}
/* one typeface everywhere (Aziz): every element on the site uses the single token (Thmanyah for Arabic, Onest for Latin) */
html[data-look="garden"] body :where(*):not(svg,svg *,code,pre,kbd){font-family:var(--font)!important}

/* 12r: «الهوايات» hover shortcut (owner): a second small bar, the same size and look as the header's section bar */
html[data-look="garden"] .kq-fly{position:fixed;z-index:140;display:flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:var(--r-ctl)!important;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 2px rgba(15,20,25,.06);opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)}
html[data-look="garden"] .kq-fly.on{opacity:1;transform:none}
.kq-fly[hidden]{display:none!important}
html[data-look="garden"] .kq-fly a{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-ctl)!important;color:var(--ink-3);font:400 14px/1 var(--font);text-decoration:none;white-space:nowrap;transition:color var(--d1) ease,background-color var(--d1) ease}
html[data-look="garden"] .kq-fly a:hover,html[data-look="garden"] .kq-fly a:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--tile) 60%,transparent);outline:0}
.kq-fly svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kq-fly .kq-log svg .lf,.kq-fly .kq-log svg .stem{stroke:#2E8B57}
@media (prefers-reduced-motion:reduce){html[data-look="garden"] .kq-fly{transition:opacity .12s ease;transform:none}}

/* ---- 12t «وداع القديم»: one hello on every section page (/, المدونة, الورشة, الهوايات): the words take the start half
   (the right, in Arabic), the other half is left empty on purpose; no illustration and no footprints under it (footprints
   live only in the footer). Main headings and section headings are in the wordmark's face: Thmanyah Sans Bold (700,
   the real Bold file under 'Kg Font' 600–900, never synthetic); intros stay Light. */
html[data-look="garden"] .kg-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:0 0 clamp(28px,4cqw,48px);padding:0}
html[data-look="garden"] .kg-intro-in{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;padding-inline-end:clamp(0px,3cqw,32px)}
html[data-look="garden"] .kg-intro h1{margin:0;font:700 34px/1.4 var(--f-title);color:var(--ink);letter-spacing:0;text-wrap:balance}
html[data-look="garden"] .kg-intro p{margin:0;max-width:40ch;font:300 22px/1.7 var(--font);color:var(--ink-3);text-wrap:pretty}
html[data-look="garden"] .kg-intro p[hidden]{display:none}
html[data-look="garden"] .kg-intro a{color:var(--ink);font-weight:400;text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-decoration-color:var(--line-2);text-underline-offset:6px;transition:text-decoration-color var(--d1) ease,color var(--d1) ease}
html[data-look="garden"] .kg-intro a:hover{color:var(--moss);text-decoration-color:var(--ink)}
/* the blog's «توصلك التدوينات على بريدك ←»: a quiet line under the hello, linked like the home's section names */
html[data-look="garden"] .kg-intro .jh-sub{display:inline-block;margin:0;font:400 17px/1.6 var(--font)}
/* the section pages start where the home starts (.kg-hub) */
html[data-look="garden"] main.kg-sec{padding-block:36px 0}
@media (max-width:767px){
  html[data-look="garden"] main.kg-sec{padding-top:20px}
  html[data-look="garden"] .kg-intro{grid-template-columns:minmax(0,1fr);margin-bottom:36px}
  html[data-look="garden"] .kg-intro-side{display:none}
  html[data-look="garden"] .kg-intro-in{gap:16px;padding-inline-end:0;max-width:34ch}
  html[data-look="garden"] .kg-intro h1{font-size:26px;line-height:1.5}
  html[data-look="garden"] .kg-intro p{font-size:20px;line-height:1.75;max-width:34ch}
  html[data-look="garden"] .kg-intro .jh-sub{font-size:16px}
}
@media (max-width:599px){html[data-look="garden"] main.kg-sec{padding-top:28px}}
/* الورشة: «الألعاب» sits where the home's grid starts (no extra top margin under the hello) */
html[data-look="garden"] .kg-intro + section.g-workshop{margin-top:0}
html[data-look="garden"] .kg-intro + section.g-workshop .tools-head{margin-top:0}
/* الألعاب / ألعابي: the same start, heading and intro sizes and distance to the cards as the hello (their own row keeps
   «ألعابي» / the gear) */
html[data-look="garden"] main.g-page{padding-top:36px}
html[data-look="garden"] main.g-page > .g-head{margin-bottom:clamp(28px,4cqw,48px)}
html[data-look="garden"] .g-head h1{font:700 34px/1.4 var(--f-title);letter-spacing:0}
html[data-look="garden"] .g-head .g-lede{margin-top:14px;max-width:40ch;font:300 22px/1.7 var(--font);color:var(--ink-3)}
@media (max-width:767px){
  html[data-look="garden"] .g-head h1{font-size:26px;line-height:1.5}
  html[data-look="garden"] .g-head .g-lede{margin-top:16px;font-size:20px;line-height:1.75;max-width:34ch}
  html[data-look="garden"] main.g-page{padding-top:20px}
  html[data-look="garden"] main.g-page > .g-head{margin-bottom:36px}
}
@media (max-width:599px){html[data-look="garden"] main.g-page{padding-top:28px}}
/* section headings («الألعاب», «أدوات») and an article's own section titles: Bold too */
html[data-look="garden"] body :is(.tools-head,.gk-h2),html[data-look="garden"] :is(.prose,.ProseMirror) :is(h2,h3){font-weight:700}

/* 12y: on phones / narrow tablets the cards switch rides with the moon (same order, the moon keeps the sun's spot) */
@media (max-width:719px){
  html[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > .kg-cards-sw{order:2;margin-inline-start:auto}
  html[data-look="garden"][data-theme="dark"] .top > .wrap > :is(.acts,.top-actions) > .kg-cards-sw + .kg-dark-sw{margin-inline-start:0}
}
@media (min-width:720px) and (max-width:899px){
  html.kg-owner[data-look="garden"] .top > .wrap > :is(.acts,.top-actions) > .kg-cards-sw{order:2;margin-inline-start:auto}
  html.kg-owner[data-look="garden"][data-theme="dark"] .top > .wrap > :is(.acts,.top-actions) > .kg-cards-sw + .kg-dark-sw{margin-inline-start:0}
}
/* 13d: the account mark (no photo, no letter) */
.kg-acc-mark{display:grid!important;place-items:center;color:var(--ink)}
.kg-acc-ic{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kg-acc-lab{position:fixed;z-index:150;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:2px;padding:4px 12px 4px 4px;background:var(--ink);color:var(--bg);border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);font:500 13px/1 var(--font)}
.kg-acc-lab button{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.6}
.kg-acc-lab button[aria-pressed="true"]{background:var(--bg);color:var(--ink);opacity:1}
.kg-acc-lab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.kg-acc-lab span{margin-inline-start:8px}

/* ---- 13r: Aziz's licensed Arabic display faces, previewed as type pairings with ?type=1..4 (a chip switches them;
   the choice sticks for the tab). The text you read (posts, cards' small print, UI) stays in Kg Font. */
@font-face{font-family:'Kg Antiqua';src:url('/fonts/garden/antiqua-100.woff2') format('woff2');font-weight:100 199;font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}
@font-face{font-family:'Kg Antiqua';src:url('/fonts/garden/antiqua-300.woff2') format('woff2');font-weight:200 499;font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}
@font-face{font-family:'Kg Antiqua';src:url('/fonts/garden/antiqua-700.woff2') format('woff2');font-weight:500 900;font-display:swap;unicode-range:U+0000-002F,U+003A-10FFFF}
@font-face{font-family:'Kg Naskh';src:url('/fonts/garden/naskh-400.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Kg Hayyakum';src:url('/fonts/garden/elgharib-400.woff2') format('woff2');font-weight:100 449;font-display:swap}
@font-face{font-family:'Kg Hayyakum';src:url('/fonts/garden/elgharib-500.woff2') format('woff2');font-weight:450 599;font-display:swap}
@font-face{font-family:'Kg Hayyakum';src:url('/fonts/garden/elgharib-700.woff2') format('woff2');font-weight:600 900;font-display:swap}
html[data-look="garden"]{--f-antiqua:'Kg Antiqua','Kg Font',Tahoma,sans-serif;--f-naskh:'Kg Naskh','Kg Font',Tahoma,sans-serif;--f-hayyakum:'Kg Hayyakum','Kg Font',Tahoma,sans-serif}
/* the Antiqua files are the trial cut, whose Western digits 0–9 are placeholder boxes: those come from Kg Font until the full files arrive */
/* 13r v2 (Aziz): each option puts ONE face on every piece of text on the site — titles, subtitles, tabs, buttons, card
   labels, numbers, menus, editor — nothing left in Kg Font. Antiqua with ss01, Hayyakum with its swashes; Naskh has
   one weight, so nothing is ever faux-bolded. */
html[data-type="1"]{--font:var(--f-antiqua);--f-title:var(--f-antiqua);--f-read:var(--f-antiqua);--f-ui:var(--f-antiqua)}
html[data-type="2"]{--font:var(--f-naskh);--f-title:var(--f-naskh);--f-read:var(--f-naskh);--f-ui:var(--f-naskh);font-synthesis:none}
html[data-type="3"]{--font:var(--f-hayyakum);--f-title:var(--f-hayyakum);--f-read:var(--f-hayyakum);--f-ui:var(--f-hayyakum)}
html[data-type="1"] body,html[data-type="1"] body *:not(svg):not(svg *){font-family:var(--f-antiqua)!important;font-feature-settings:"ss01" 1}
html[data-type="2"] body,html[data-type="2"] body *:not(svg):not(svg *){font-family:var(--f-naskh)!important;font-synthesis:none}
html[data-type="3"] body,html[data-type="3"] body *:not(svg):not(svg *){font-family:var(--f-hayyakum)!important;font-feature-settings:"swsh" 1}
/* 4 (Aziz): Arabic in Thick Naskh Swash (its long word-end swashes), Latin in Antiqua — Naskh's own Latin is never used */
@font-face{font-family:'Kg NaskhAr';src:url('/fonts/garden/naskh-400.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF}
html[data-look="garden"]{--f-naskh-mix:'Kg NaskhAr','Kg Antiqua','Kg Font',Tahoma,sans-serif}
html[data-type="4"]{--font:var(--f-naskh-mix);--f-title:var(--f-naskh-mix);--f-read:var(--f-naskh-mix);--f-ui:var(--f-naskh-mix);font-synthesis:none}
html[data-type="4"] body,html[data-type="4"] body *:not(svg):not(svg *){font-family:var(--f-naskh-mix)!important;font-feature-settings:"ss01" 1;font-synthesis:none}
/* the chip */
.kg-type-lab{position:fixed;z-index:300;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline-start:14px;display:flex;align-items:center;gap:4px;padding:5px;border-radius:14px;background:var(--ink,#16171A);color:var(--bg,#fff);font:500 13px var(--font);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.kg-type-lab button{border:0;background:none;color:inherit;padding:6px 10px;border-radius:10px;cursor:pointer;font:inherit;opacity:.7}
.kg-type-lab button[aria-pressed="true"]{background:color-mix(in srgb,var(--bg,#fff) 18%,transparent);opacity:1}

/* 13y (Aziz): the subscribe tile, the ice cream and the journal's subscribe band are one quiet family — the same soft
   surface and hairline in light and in dark (they used to be a bright card next to a dark chip), and the band's ×
   sits in its corner */
html[data-look="garden"] :is(.pa-tile,.ice-btn,.sub-band){--q-bg:var(--tile);--q-edge:var(--line);background:var(--q-bg)!important;box-shadow:inset 0 0 0 1px var(--q-edge)!important;border:0!important}
/* in dark they stay night tiles even with light cards (dark.css would make them paper islands) */
html[data-look="garden"][data-look][data-theme="dark"][data-theme][lang] :is(.pa-tile,.ice-btn,.sub-band){--bg:#111214;--tile:#18191C;--tile-2:#202125;--sand:#202125;--paper:#18191C;--field:#1B1C1F;--ink:#ECEDEF;--ink-2:#C9CCD1;--ink-3:#9A9FA6;--olive:#ECEDEF;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);--q-bg:#18191C;--q-edge:rgba(255,255,255,.09);--fg:#ECEDEF;--muted:#9A9FA6;--card:#18191C;color:var(--ink)}
html[data-look="garden"][data-look][data-theme="dark"][data-theme][lang] .sub-band .sub-form button{background:#ECEDEF!important;border-color:#ECEDEF!important;color:#111214!important}
html[data-look="garden"] button.pa-tile:not([aria-disabled="true"]):hover,html[data-look="garden"] .ice-btn:not(:disabled):hover{--q-bg:var(--tile-2);--q-edge:var(--line-2)}
html[data-look="garden"][data-look][data-theme="dark"][data-theme][lang] :is(button.pa-tile:not([aria-disabled="true"]):hover,.ice-btn:not(:disabled):hover){--q-bg:#202125;--q-edge:rgba(255,255,255,.16)}
html[data-look="garden"] .ice-btn{border-radius:var(--r-card)!important;padding:8px 16px 8px 10px}
html[data-look="garden"] .sub-band{padding:16px 20px 16px 56px}
html[data-look="garden"] .sub-band .sb-x{top:10px;left:10px;transform:none;width:36px;height:36px}
@media (max-width:620px){html[data-look="garden"] .sub-band{padding:16px 16px 16px 48px}}

/* 13z (Aziz): bigger tap areas, same look — an invisible frame around the small controls (~40px, a bit under the
   44px rule so neighbours never overlap): the penguin and the day/night switch 38×40, the section tabs 38px tall,
   the footer links ~42px tall */
html[data-look="garden"] :is(header .brand,header .nav a){position:relative}
html[data-look="garden"] header .brand::after{content:''!important;display:block!important;position:absolute;left:50%;top:50%;width:max(100%,38px);height:max(100%,40px);transform:translate(-50%,-50%)}
html[data-look="garden"] header .nav a::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,38px);transform:translateY(-50%);background:none;pointer-events:auto}
html[data-look="garden"] .foot-links a{display:inline-block;padding-block:10px}

/* 13z (Aziz): one gap under every tab's hello, a little roomier, the same on الإقلو, المدونة, الورشة, الهوايات and
   الألعاب — from the last line of the intro to the first card. On the owner's الإقلو the «رتّب الصفحة» bar sits
   inside that gap (just above the cards), so the cards start at the same height for owner and visitor. */
:root{--kg-intro-gap:72px}
@media (max-width:820px){:root{--kg-intro-gap:52px}}
html[data-look="garden"] .kg-intro{margin-bottom:var(--kg-intro-gap)!important}
html[data-look="garden"] .kg-intro ~ .kh-head{margin:-40px 0 8px!important}
html[data-look="garden"] .games .g-head,html[data-look="garden"] main .g-head:has(.g-lede){margin-bottom:var(--kg-intro-gap)}
/* the games page's hello reads like the other tabs' (it has its own markup) */
html[data-look="garden"] main .g-head .g-lede{margin-top:14px;max-width:40ch;font:300 22px/1.7 var(--font);color:var(--ink-3)}
@media (max-width:820px){html[data-look="garden"] main .g-head .g-lede{font-size:20px;line-height:1.75;max-width:34ch}}

/* 14d «صور أخف وأسرع»: a card photo waits on a soft placeholder (the photo's own average colour when the card knows
   it, else a faint tint) and fades in once it has arrived; a cached photo shows at once (.kg-now). An animation, not a
   transition, so the images' own transitions (pan, lift, dark filter) are left alone. */
.kg-ph{background-color:var(--ph,rgba(128,134,140,.14))}
img.kg-fade:not(.kg-in){opacity:0}
img.kg-fade.kg-in:not(.kg-now){animation:kg-photo-in .45s ease-out both}
@keyframes kg-photo-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){img.kg-fade.kg-in:not(.kg-now){animation:none}}

/* 14e (Aziz): no section links repeated in the footer — the header already has them */
.foot .foot-links{display:none!important}

/* 14i (Aziz): a balanced footer — «كانقوين · kanguinn: كنغر + بطريق» on the right, the penguin on its dune at the far
   left, both centred on one line; the footprint trail sits just above them */
html[data-look="garden"] .foot{margin-top:72px}
html[data-look="garden"] .foot .trail{height:34px;margin-bottom:-4px}
html[data-look="garden"] .foot-row{display:flex!important;justify-content:space-between;align-items:center!important;gap:16px;padding-block:6px 28px!important}
html[data-look="garden"] .foot-row .kg-sign{padding:0;flex:none;margin-inline-start:auto}
html[data-look="garden"] .foot-row .kg-sign svg{width:96px;height:45px}
@media (max-width:600px){html[data-look="garden"] .foot-row .kg-sign svg{width:84px;height:39px}}