/* Smart Metrics: one desk. A handwritten ledger page sits beside an e-paper tablet showing the same day handled by the
   systems; then who we are, a pen sketch of what we make, our products as objects on the desk (a phone, a laptop), a
   desk calendar to request a meeting, and a handwritten note to sign off. Nothing moves on scroll (owner, 2026-10-16).
   Light or dark follows the visitor's own setting, and the switch in the header flips it (CSS only). Fonts are ours
   (fonts/, SIL OFL). */

/* The pen waits for its own font (preloaded) rather than writing in a stand-in and switching mid-stroke */
@font-face { font-family: "Aref Ruqaa Ink"; font-weight: 400; font-display: block; src: url("/fonts/aref-ruqaa-ink-400-arabic.woff2") format("woff2"); }
@font-face { font-family: "Aref Ruqaa Ink"; font-weight: 700; font-display: block; src: url("/fonts/aref-ruqaa-ink-700-arabic.woff2") format("woff2"); }
/* English handwriting on the English page (owner, 2026-10-17): Caveat, SIL OFL, Latin only, so any Arabic falls back to the
   Ruqaa ink. Slightly enlarged to sit with the Arabic hand. */
@font-face { font-family: "Caveat"; font-weight: 400 700; font-display: block; size-adjust: 112%; src: url("/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; font-display: swap; src: url("/fonts/reem-kufi-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; font-display: swap; src: url("/fonts/reem-kufi-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; font-weight: 200 700; font-display: swap; src: url("/fonts/readex-pro-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Readex Pro"; font-weight: 200 700; font-display: swap; src: url("/fonts/readex-pro-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/* The ink font draws each stroke between two palette colours: blue-black for writing, red pen for notes. Browsers
   without colour fonts use the plain glyphs in the text colour. */
@font-palette-values --blue-ink { font-family: "Aref Ruqaa Ink"; override-colors: 0 #34456a, 1 #141a26; }
@font-palette-values --red-ink { font-family: "Aref Ruqaa Ink"; override-colors: 0 #d0603f, 1 #8e2c1c, 2 #d0603f, 3 #8e2c1c; } /* 2, 3: the marks */

:root {
  color-scheme: light dark;
  /* The room (flips with light and dark) */
  --desk: light-dark(#e9dfc7, #121823);
  --text: light-dark(#1b2230, #ece4d0);
  --soft: light-dark(#4d5462, #a7adb8);
  --line: light-dark(rgba(64, 104, 156, .26), rgba(170, 190, 220, .16));
  --red: light-dark(#a23c26, #df7558);
  --teal: light-dark(#1b655f, #6cc0b4);
  --shadow: light-dark(rgba(27, 34, 48, .45), rgba(0, 0, 0, .65));
  /* The objects on the desk keep their own colours, day or night; at night the paper is lit, not glowing */
  --paper: light-dark(#f2ead6, #e2d8c0);
  --display: light-dark(#f8f3e8, #e7e0cf);
  --frame: light-dark(#1b2230, #05080d);
  --base: light-dark(#c9c0ac, #2a3241);
  --base-notch: light-dark(#b3aa95, #1d2431);
  --ink: #1b2230;
  --ink-soft: #4a515e;
  --ink-red: #a23c26;
  --ink-teal: #155a54;
  --ink-line: rgba(64, 104, 156, .26);
  --hand: "Aref Ruqaa Ink", "Readex Pro", serif;
  --machine: "Reem Kufi", "Readex Pro", sans-serif;
  --body: "Readex Pro", "Segoe UI", system-ui, Tahoma, sans-serif;
  --gutter: 16px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The switch flips whatever the visitor's own setting is */
@media (prefers-color-scheme: light) { :root:has(#theme:checked) { color-scheme: dark; } }
@media (prefers-color-scheme: dark) { :root:has(#theme:checked) { color-scheme: light; } }
/* Older browsers without light-dark() get the day palette and no switch */
@supports not (color: light-dark(#000, #fff)) {
  :root { --desk: #e9dfc7; --text: #1b2230; --soft: #4d5462; --line: rgba(64, 104, 156, .26); --red: #a23c26; --teal: #1b655f;
    --shadow: rgba(27, 34, 48, .45); --paper: #f2ead6; --display: #f8f3e8; --frame: #1b2230; --base: #c9c0ac; --base-notch: #b3aa95; }
  .theme-btn { display: none !important; }
}
@media (min-width: 720px) { :root { --gutter: 40px; } }
:root:lang(en) { --hand: "Caveat", "Aref Ruqaa Ink", cursive; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--desk) var(--grain); color: var(--text); font: 400 18px/1.75 var(--body); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 3px; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 16px; top: -60px; background: var(--text); color: var(--desk); padding: 10px 14px;
  border-radius: 4px; text-decoration: none; z-index: 5; }
.skip:focus { top: 12px; }
.theme-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* Header */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 500 1.02rem/1.2 var(--body); }
.brand .m8 { stroke: var(--red); } .brand .m7 { stroke: var(--text); }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .theme-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px;
  padding-inline: 10px; color: var(--soft); text-decoration: none; font-size: .95rem; border-radius: 8px; cursor: pointer;
  transition: color .15s ease, background-color .15s ease; }
.nav a:hover, .theme-btn:hover { color: var(--text); }
.nav .opt { display: none; }
@media (min-width: 900px) { .nav .opt { display: inline-flex; } }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .moon, .theme-btn .to-light { display: none; }
@media (prefers-color-scheme: light) { :root:has(#theme:checked) .theme-btn .moon { display: block; } :root:has(#theme:checked) .theme-btn .sun { display: none; } }
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme:checked)) .theme-btn .moon { display: block; } :root:not(:has(#theme:checked)) .theme-btn .sun { display: none; }
  .theme-btn .to-light { display: inline; } .theme-btn .to-dark { display: none; }
}
:root:has(#theme:focus-visible) .theme-btn { outline: 2px solid var(--red); outline-offset: 2px; }
.nav .cta-btn { margin-inline-start: 6px; padding-inline: 14px; min-height: 40px; border-radius: 8px; background: var(--text); color: var(--desk);
  font-weight: 500; }
.nav .cta-btn:hover { background: var(--teal); color: var(--desk); }
.brand, .nav a, .theme-btn { white-space: nowrap; }
.brand .logo path { transition: stroke .6s ease; }
@media (max-width: 480px) {
  .site-head .wrap { gap: 8px; }
  .brand { font-size: .92rem; gap: 6px; } .brand svg { width: 22px; height: 22px; }
  .nav a, .theme-btn { min-width: 40px; padding-inline: 6px; font-size: .86rem; }
  .nav .cta-btn { padding-inline: 10px; margin-inline-start: 2px; }
}
/* Very small phones: the header keeps one line by shortening two labels (screen readers still hear the full ones) */
.nav .short { display: none; }
@media (max-width: 420px) { /* the English header needs 397px at full length */
  .nav .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .nav .short { display: inline; }
}

/* Opening */
.intro { padding-block: clamp(28px, 6vw, 64px) clamp(28px, 4vw, 44px); }
h1 { margin: 0 0 16px; font: 600 clamp(2.2rem, 6vw, 4.1rem)/1.2 var(--body); }
h1:lang(en) { letter-spacing: -.01em; } /* never on Arabic: spacing breaks the joins */
.intro p { margin: 0; max-width: 46ch; color: var(--soft); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
/* The two ways in, right under the opening (client and founder reviews 18 Oct): the booking ringed in pen, WhatsApp
   beside it in words; the links in the intro lead to each product */
.intro p a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 5px; }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 18px 0 0; margin-inline-start: -16px; }
.hero-act .book-btn { color: var(--red); }
.hero-act .book-btn .circ { stroke: var(--red); }
.hero-wa { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 5px; }
@media (prefers-color-scheme: dark) { :root:not(:has(#theme:checked)) .hero-act .book-btn { font-palette: --chalk-red; } }
@media (prefers-color-scheme: light) { :root:has(#theme:checked) .hero-act .book-btn { font-palette: --chalk-red; } }
/* The way in from each product: a hand-written line with a pen arrow, to WhatsApp with that product's message */
.ask { margin: 12px 0 0; }
.ask a { color: var(--red); font: 700 1.35rem/1.5 var(--hand); font-palette: --red-ink; text-decoration: none; }
[dir="rtl"] .ask a { font-size: 1.6rem; }
[dir="rtl"] :is(.ask a, .book-btn) { word-spacing: .25em; } /* Aref Ruqaa's space is very narrow */
.ask a:hover { text-decoration: underline; text-underline-offset: 6px; }
.ask .mk { width: 1.7em; height: .7em; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
@media (prefers-color-scheme: dark) { :root:not(:has(#theme:checked)) .ask a { font-palette: --chalk-red; } }
@media (prefers-color-scheme: light) { :root:has(#theme:checked) .ask a { font-palette: --chalk-red; } }
.caption { margin: 22px 0 0; color: var(--soft); font-size: .9rem; max-width: 70ch; }
.caption a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 4px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .caption a { display: none; } } /* nothing is being written, so nothing to skip */
.nw { white-space: nowrap; }

/* Objects: one light, one shadow for everything on the desk */
.sheet, .screen, .phone, .laptop .lid, .sketch, .calendar, .in-short { box-shadow: 0 1px 1px rgba(27, 34, 48, .1), 0 18px 30px -18px var(--shadow); }

/* The desk: ledger page and tablet */
.desk { display: grid; gap: 28px; align-items: start; }
@media (min-width: 940px) { .desk { grid-template-columns: 1.05fr 1fr; gap: 44px; } }
.sheet { position: relative; color: var(--ink); font-palette: --blue-ink; padding: 30px 28px; padding-inline-start: 64px; border-radius: 3px;
  background: var(--paper); background-image: var(--grain), repeating-linear-gradient(to bottom, transparent 0 51px, var(--ink-line) 51px 52px);
  background-position: 0 0, 0 30px; }
.sheet::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 46px; width: 5px; border-inline: 1px solid var(--ink-red); opacity: .7; }
@media (min-width: 940px) { .desk .sheet { transform: rotate(-1deg); } [dir="ltr"] .desk .sheet { transform: rotate(1deg); } }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; min-height: 52px; } /* grows a whole ruled line at a time */
.sheet-title { margin: 0; font: 700 clamp(1.8rem, 3.4vw, 2.3rem)/52px var(--hand); }
.sheet-head span { font: 400 1.25rem/52px var(--hand); }
.ledger { list-style: none; margin: 0; padding: 0; font: 400 clamp(1.12rem, 2.2vw, 1.38rem)/52px var(--hand); }
.ledger li { min-height: 52px; }
.ledger .t { display: inline-block; min-width: 3.4em; }
.ledger s { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.note { color: var(--ink-red); font-palette: --red-ink; }
.ledger span.note { padding-inline-start: 1.2em; }

.screen { position: relative; background: var(--display); color: var(--ink-soft); border: 14px solid var(--frame); border-radius: 24px; padding: 16px 22px 14px; }
.screen::before, .phone::before { content: ""; position: absolute; top: -9px; left: 50%; width: 5px; height: 5px; border-radius: 50%;
  background: #3a4458; transform: translateX(-50%); }
@media (min-width: 940px) { .desk .screen { transform: rotate(.6deg); margin-top: 18px; } [dir="ltr"] .desk .screen { transform: rotate(-.6deg); } }
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 52px; }
.screen-title { margin: 0; font: 700 clamp(1.6rem, 3vw, 2.1rem)/1 var(--machine); color: var(--ink-teal); }
.screen-head small { color: var(--ink-soft); font-size: .85rem; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { display: grid; grid-template-columns: 3.6rem 1fr; gap: 14px; align-items: center; min-height: 52px; padding-block: 8px;
  border-top: 1px solid rgba(31, 111, 104, .2); font-size: .95rem; line-height: 1.5; }
.log time, .log .tag { color: var(--ink-teal); font-variant-numeric: tabular-nums; font-weight: 500; }
.log .tag { color: var(--ink-red); }
.log b { font-weight: 500; color: var(--ink); }
.cursor { display: inline-block; width: 2px; height: 1.15em; margin-inline-start: 5px; vertical-align: -0.2em; background: var(--ink-teal); }

/* The sections after the desk share one rhythm */
.about, .make, .how, .showcase, .faq, .talk { padding-block: clamp(90px, 13vw, 150px) 0; }
:is(.about, .make, .how, .showcase, .faq, .talk) h2 { margin: 0 0 14px; font: 600 clamp(1.9rem, 4.2vw, 2.9rem)/1.25 var(--body); }
.kicker { margin: 0 0 6px; color: var(--teal); font: 500 1rem/1.4 var(--body); }
.lead { margin: 0 0 32px; max-width: 46ch; color: var(--soft); font-size: 1.12rem; }

/* Who we are: the company first */
.about .wrap { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .about .wrap { grid-template-columns: 1fr 1fr; gap: 72px; } }
.about .lead { margin-bottom: 0; }
.principles { list-style: none; margin: 0; padding: 0; }
.principles li { padding-block: 18px; border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles h3 { margin: 0 0 4px; font: 500 1.2rem/1.4 var(--body); }
.principles p { margin: 0; color: var(--soft); }

/* What we make: the points beside a pen sketch */
.make .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 940px) { .make .wrap { grid-template-columns: 1fr 1fr; gap: 72px; } }
.points { list-style: none; margin: 0; padding: 0; }
.points li { padding-block: 13px; border-top: 1px solid var(--line); }
.points li:last-child { border-bottom: 1px solid var(--line); }
.points b { font-weight: 500; color: var(--text); }
.object { justify-self: center; width: 100%; }

.sketch { position: relative; max-width: 520px; margin-inline: auto; background: var(--paper); background-image: var(--grain);
  border-radius: 3px; padding: 18px; color: var(--ink); }
@media (min-width: 940px) { .sketch { transform: rotate(1.2deg); } }
.sketch-canvas { position: relative; container: sketch / inline-size; }
.sketch-canvas > svg:first-child { display: block; width: 100%; height: auto; }
.sketch .pen { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sketch .red { stroke: var(--ink-red); }
/* The words sit on the drawing at its own scale (cqw: hundredths of the drawing's width) */
.lbl { position: absolute; translate: -50% -50%; color: var(--ink); font: 400 4.6cqw/1.3 var(--hand); font-palette: --blue-ink; white-space: nowrap; }
.lbl.core { left: 50%; top: 50.3%; font-weight: 700; font-size: 5.8cqw; }
.l-tr { left: 80.2%; top: 20.9%; } .l-tl { left: 19.8%; top: 20.9%; } .l-br { left: 80.2%; top: 80.3%; } .l-bl { left: 19.8%; top: 80.3%; }
.lbl.redtext { left: 78.3%; top: 37.6%; font-size: 3.8cqw; color: var(--ink-red); font-palette: --red-ink; }
/* On a phone the drawing shrinks to half size, so its words grow to stay readable */
.sketch-canvas:lang(en) .lbl { font-size: 4.2cqw; } .sketch-canvas:lang(en) .lbl.core { font-size: 4.6cqw; }
@container sketch (max-width: 420px) { .lbl { font-size: 6.2cqw; } .lbl.core { font-size: 7.4cqw; } .lbl.redtext { font-size: 5.2cqw; } }
@media (max-width: 520px) { .sketch { padding: 10px; } }
/* The guide: a pen arrow from the drawing to the text beside it, and the three points underlined in turn */
.guide { display: none; }
@media (min-width: 940px) {
  .guide { display: block; position: absolute; right: -86px; top: 34%; width: 80px; height: auto; overflow: visible; fill: none;
    stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  [dir="ltr"] .guide { right: auto; left: -86px; scale: -1 1; }
}
.points b { position: relative; }
.pen-u { position: absolute; left: 0; bottom: -4px; width: 100%; height: 7px; overflow: visible; fill: none; stroke: var(--red);
  stroke-width: 2; stroke-linecap: round; }
[dir="rtl"] .pen-u { scale: -1 1; } /* drawn from where the words start */

/* How we work: four steps written on a ledger page (a real sequence, so numbered) */
.how .wrap { display: grid; gap: 36px; align-items: start; }
@media (min-width: 940px) { .how .wrap { grid-template-columns: 1fr 1.1fr; gap: 72px; } }
.how .lead { margin-bottom: 0; }
.steps { position: relative; list-style: none; margin: 0; padding: 14px 28px 18px; padding-inline-start: 76px; color: var(--ink);
  background: var(--paper); background-image: var(--grain); border-radius: 3px;
  box-shadow: 0 1px 1px rgba(27, 34, 48, .1), 0 18px 30px -18px var(--shadow); }
@media (min-width: 940px) { .steps { rotate: .8deg; } [dir="ltr"] .steps { rotate: -.8deg; } }
.steps::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 56px; width: 5px; border-inline: 1px solid var(--ink-red); opacity: .7; }
.steps li { position: relative; padding-block: 16px 18px; border-top: 1px solid var(--ink-line); }
.steps li:first-child { border-top: 0; }
.step-n { position: absolute; inset-inline-start: -62px; top: 14px; width: 44px; text-align: center; color: var(--ink-red);
  font: 700 2.1rem/1 var(--hand); font-palette: --red-ink; }
.steps h3 { margin: 0 0 4px; font: 700 1.7rem/1.35 var(--hand); font-palette: --blue-ink; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
[lang="en"] .steps h3 { font: 700 1.75rem/1.3 var(--hand); }
[lang="en"] .step-n { font: 700 2rem/1 var(--hand); top: 14px; }
.steps li:nth-child(2) { --step-at: 1.3s; } .steps li:nth-child(3) { --step-at: 2.6s; } .steps li:nth-child(4) { --step-at: 3.9s; }
.steps .step-n { --at: var(--step-at, 0s); --dur: .5s; }
.steps h3 { --at: calc(var(--step-at, 0s) + .3s); --dur: .6s; }
.steps p { --at: calc(var(--step-at, 0s) + .75s); --dur: .6s; }
html[dir="ltr"].js .steps .ink { -webkit-mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front)); }

/* Our products: two side by side, each with its object above; the objects share one baseline */
.pair { display: grid; gap: 64px; }
@media (min-width: 940px) {
  .pair { grid-template-columns: 1fr 1fr; gap: 0; }
  .item { display: grid; grid-row: span 5; grid-template-rows: subgrid; padding-inline: 40px; } /* device, kicker, title, text, the way in */
  .item:first-child { padding-inline-start: 0; border-inline-end: 1px solid var(--line); }
  .item:last-child { padding-inline-end: 0; }
  .item > .phone, .item > .laptop { align-self: end; }
}
.item > .phone, .item > .laptop { margin-bottom: 32px; }
.item > .laptop { width: 100%; max-width: 520px; }
.item h3 { margin: 0 0 8px; font: 600 1.6rem/1.3 var(--body); }
.item > p:not(.kicker, .ask) { margin: 0; color: var(--soft); max-width: 48ch; }
.status { display: inline-block; margin-inline-start: 4px; vertical-align: .2em; color: var(--red); font: 500 .85rem/1 var(--body);
  border: 1.5px solid currentColor; border-radius: 6px; padding: 5px 8px; }

/* The phone (clinic assistant) */
.phone { position: relative; max-width: 330px; margin-inline: auto; background: var(--display); color: var(--ink); border: 12px solid var(--frame);
  border-radius: 38px; padding: 18px 14px 20px; }
@media (min-width: 940px) { .phone { transform: rotate(-1.5deg); } }
.phone .bar-top { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; border-bottom: 1px solid rgba(31, 111, 104, .2); margin-bottom: 12px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-teal); color: #f8f3e8; display: grid; place-items: center;
  font: 700 .95rem/1 var(--machine); }
.phone .bar-top b { display: block; font-weight: 500; font-size: .92rem; }
.phone .bar-top small { color: var(--ink-soft); font-size: .85rem; }
.chat { display: grid; gap: 8px; }
.msg { max-width: 84%; padding: 8px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.55; }
.msg.them { justify-self: end; background: #dcebe6; color: #13332f; border-start-end-radius: 4px; }
.msg.us { justify-self: start; background: #fffdf7; border: 1px solid #e3dccb; border-start-start-radius: 4px; }
.msg.ok { justify-self: start; background: var(--ink-teal); color: #f8f3e8; border-start-start-radius: 4px; }
.illus { display: block; margin-top: 14px; text-align: center; color: var(--ink-soft); font-size: .85rem; }

/* The laptop (Mantooq) */
.laptop { max-width: 560px; margin-inline: auto; padding-inline: 5%; } /* room for the base, which is wider than the lid */
.laptop .lid { position: relative; background: var(--display); color: var(--ink-soft); border: 12px solid var(--frame); border-bottom-width: 16px;
  border-radius: 16px 16px 6px 6px; padding: 14px 20px 12px; }
.laptop .base { height: 14px; margin-inline: -5%; background: var(--base); border-radius: 0 0 14px 14px;
  box-shadow: 0 14px 22px -14px var(--shadow); position: relative; }
.laptop .base::before { content: ""; position: absolute; top: 0; left: 42%; width: 16%; height: 5px; border-radius: 0 0 6px 6px;
  background: var(--base-notch); }
.day { display: grid; grid-template-columns: 1fr auto; }
.day .row { display: contents; }
.day .row > * { padding-block: 10px; border-top: 1px solid rgba(31, 111, 104, .2); font-size: .9rem; line-height: 1.5; }
.day b { font-weight: 500; color: var(--ink); display: block; }
.day .when { color: var(--ink-teal); font-weight: 500; font-variant-numeric: tabular-nums; text-align: end; padding-inline-start: 14px; white-space: nowrap; }
.day .warn { color: var(--ink-red); }

/* Questions: native disclosure, one tap to open */
.qa { max-width: 820px; margin-top: 28px; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 14px;
  list-style: none; cursor: pointer; font: 500 1.12rem/1.5 var(--body); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; content: "+" / ""; flex: none; color: var(--teal); font: 300 1.7rem/1 var(--body); transition: transform .25s ease; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa details p { margin: 0 0 22px; max-width: 62ch; color: var(--soft); }

/* Request a meeting: a week page from the same notebook as the ledger (paper, ruling, red margin, a handwritten title),
   its times printed; a red pen rings the one you point at or tab to (owner, 2026-10-17: the old red banner and button
   boxes looked out of place) */
.calendar { position: relative; max-width: 760px; padding: 20px 26px 20px; padding-inline-start: 64px; border-radius: 3px; color: var(--ink);
  background: var(--paper); background-image: var(--grain); }
.calendar::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 46px; width: 5px; border-inline: 1px solid var(--ink-red); opacity: .7; }
@media (min-width: 940px) { .calendar { transform: rotate(.5deg); } [dir="ltr"] .calendar { transform: rotate(-.5deg); } }
.calendar :focus-visible { outline-color: var(--ink-red); } /* the paper stays light at night */
.cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 16px; padding-bottom: 8px; }
.cal-head b { font: 700 clamp(1.8rem, 3.4vw, 2.3rem)/1.5 var(--hand); font-palette: --blue-ink; }
.cal-head small { color: var(--ink-soft); font-size: .88rem; }
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.week .dayname { padding: 12px 4px 10px; border-bottom: 1px solid var(--ink-line); text-align: center; font: 600 .92rem/1.2 var(--body); }
.slot { display: flex; align-items: center; justify-content: center; min-height: 58px; border-bottom: 1px solid var(--ink-line);
  color: var(--ink-soft); text-decoration: none; font: 500 .92rem/1.2 var(--body); font-variant-numeric: tabular-nums; transition: color .2s ease; }
.slot .t { position: relative; padding: 4px 8px; text-decoration: underline dotted rgba(74, 81, 94, .5); text-decoration-thickness: 1.5px;
  text-underline-offset: 6px; }
.slot:hover .t, .slot:focus-visible .t { text-decoration-color: transparent; }
.circ { position: absolute; inset: -7px -12px; width: calc(100% + 24px); height: calc(100% + 14px); overflow: visible; pointer-events: none;
  fill: none; stroke: var(--ink-red); stroke-width: 2; stroke-linecap: round; }
[dir="rtl"] .circ { scale: -1 1; } /* the pen starts where the words start */
.circ path { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; transition: stroke-dashoffset .2s ease-in; }
.slot:hover, .slot:focus-visible { color: var(--ink-red); }
.slot:hover .circ path, .slot:focus-visible .circ path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease-out; }
.slot:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .slot .circ path { transition: none; } }
/* On a phone each day is one ruled line: the day, then its three times */
@media (max-width: 520px) {
  .calendar { padding: 16px 14px 16px; padding-inline-start: 38px; }
  .calendar::before { inset-inline-start: 22px; }
  .week { grid-template-columns: 1fr; }
  .col { display: grid; grid-template-columns: 4.6rem repeat(3, minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--ink-line); }
  .col:lang(en) { grid-template-columns: 5.8rem repeat(3, minmax(0, 1fr)); }
  .week .dayname { padding: 0; border-bottom: 0; text-align: start; font-size: .88rem; }
  .slot { min-height: 52px; border-bottom: 0; font-size: .85rem; }
  .slot .t { padding: 4px; }
}
.cal-foot { margin: 14px 0 0; color: var(--ink-soft); font-size: .88rem; }
/* With the owner's Google booking page: what to expect on ruled lines, then the way in, ringed in red pen; pointing at
   it draws the ring again */
.book { border-top: 1.5px solid var(--ink); }
.book-facts { list-style: none; margin: 0 0 22px; padding: 0; }
.book-facts li { padding: 13px 2px; border-bottom: 1px solid var(--ink-line); color: var(--ink-soft); }
.book-btn { position: relative; display: inline-block; margin-inline-start: 6px; padding: 12px 34px; color: var(--ink-red);
  font: 700 clamp(1.45rem, 3vw, 1.85rem)/1.4 var(--hand); font-palette: --red-ink; text-decoration: none; white-space: nowrap; }
.book-btn .circ { inset: 0; width: 100%; height: 100%; }
.book-btn .circ path { stroke-dashoffset: 0; }
.book-btn:hover .circ path, .book-btn:focus-visible .circ path { animation: redraw .55s ease-out; }
@keyframes redraw { from { stroke-dashoffset: 1.05; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .book-btn .circ path { animation: none !important; } }
.or { margin: 26px 0 0; color: var(--soft); }
/* WhatsApp first, email beside it (only once the company number is set) */
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.reach .or { margin: 0; }
.wa-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: 8px;
  background: var(--teal); color: var(--desk); text-decoration: none; font-weight: 500; transition: background-color .15s ease; }
.wa-btn:hover { background: var(--text); }
.wa-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--text); text-decoration: none; }
.wa-link:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.profile-link { margin: 14px 0 0; color: var(--soft); }
.profile-link a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 5px; }
.privacy-note { margin: 10px 0 0; color: var(--soft); font-size: .88rem; }
.privacy-note a { color: var(--soft); text-underline-offset: 3px; }
.profile-link small { margin-inline-start: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; font-size: .85rem; }
.mail { color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Sign-off: a handwritten note on the desk, signed like a letter */
.signoff { padding-block: clamp(90px, 13vw, 150px) clamp(60px, 9vw, 100px); text-align: center; }
.note-card { position: relative; display: inline-block; margin: 0; min-width: min(420px, 86vw); max-width: calc(100% - 2 * var(--gutter)); padding: 34px 48px 30px;
  background: var(--paper); background-image: var(--grain); color: var(--ink); font-palette: --blue-ink; border-radius: 3px;
  box-shadow: 0 1px 1px rgba(27, 34, 48, .1), 0 18px 30px -18px var(--shadow); transform: rotate(-2deg); }
.note-line { margin: 0; font: 700 clamp(1.9rem, 4.6vw, 2.7rem)/1.45 var(--hand); }
.note-sign { margin: 22px 0 0; text-align: end; font: 400 1.5rem/1.2 var(--hand); color: var(--ink-red); font-palette: --red-ink; }
.swash { display: block; width: 190px; height: auto; margin-inline-start: auto; margin-top: -2px; }
.swash path { fill: none; stroke: var(--ink-red); stroke-width: 2.2; stroke-linecap: round; }

/* Footer: who we are, where to go, how to reach us */
.site-foot { border-top: 1px solid var(--line); color: var(--soft); font-size: .95rem; }
.foot-grid { display: grid; gap: 28px; padding-block: 40px 28px; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.1fr 1.4fr 1fr; gap: 48px; align-items: start; } }
.foot-brand p { margin: 10px 0 0; max-width: 30ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; }
.foot-contact { display: grid; gap: 10px; justify-items: start; }
.social { display: flex; gap: 2px; margin: 0 -10px; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--soft);
  transition: color .15s ease, background-color .15s ease; }
.social a:hover { color: var(--text); background: var(--line); }
.social svg { width: 20px; height: 20px; }
/* Accounts still to come: the icons in pencil, "soon" handwritten under them; pointing at one inks it and writes its
   name in red (a mouse only; on a touch screen the pencil "soon" says it all, and screen readers hear "X: soon") */
.social .soon > span { display: grid; place-items: center; width: 44px; height: 44px; color: var(--soft); opacity: .45;
  transition: opacity .25s ease, color .25s ease; }
.social .soon:hover > span { opacity: 1; color: var(--text); }
.soon-line { display: grid; justify-items: start; margin: 0; font: 400 1.3rem/1.3 var(--hand); }
.soon-line > span { grid-area: 1 / 1; padding-inline: .25em; white-space: nowrap; }
.soon-all { color: var(--soft); font-palette: --blue-ink; opacity: 1; transition: opacity .25s ease; }
.soon-note { color: var(--red); font-palette: --red-ink; --ink-front: 0%; transition: --ink-front .2s ease-in;
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front)); }
[dir="ltr"] .soon-note { -webkit-mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front)); }
.foot-social:has(.soon:hover) .soon-all { opacity: 0; }
.foot-social:has(.s-x:hover) .n-x, .foot-social:has(.s-instagram:hover) .n-instagram, .foot-social:has(.s-linkedin:hover) .n-linkedin,
.foot-social:has(.s-tiktok:hover) .n-tiktok { --ink-front: 112%; transition: --ink-front .7s cubic-bezier(.33, .12, .4, 1); }
@media (prefers-reduced-motion: reduce) { .soon-note, .foot-social .soon-note { transition: none; } }
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme:checked)) .soon-all { font-palette: --chalk; }
  :root:not(:has(#theme:checked)) .soon-note { font-palette: --chalk-red; }
}
@media (prefers-color-scheme: light) {
  :root:has(#theme:checked) .soon-all { font-palette: --chalk; }
  :root:has(#theme:checked) .soon-note { font-palette: --chalk-red; }
}
.foot-fine { border-top: 1px solid var(--line); padding-block: 16px 22px; }
.foot-fine p { margin: 0; font-size: .85rem; }
bdi[lang="ar"] { white-space: nowrap; } /* the company's Arabic name, never split across lines in English text */

/* The desk's edges on wide screens (owner, 2026-10-16): a busy working day's notes, in ink on the desk and on scraps of
   paper, beside the page. Decoration only. Positions are in edges.css (generated); ink.js writes each one once. */
@font-palette-values --chalk { font-family: "Aref Ruqaa Ink"; override-colors: 0 #f1e9d4, 1 #c9c0aa, 2 #f1e9d4, 3 #c9c0aa; }
@font-palette-values --chalk-red { font-family: "Aref Ruqaa Ink"; override-colors: 0 #f3a088, 1 #df7558, 2 #f3a088, 3 #df7558; }
body { position: relative; }
.edges { display: none; }
@media (min-width: 1400px) {
  /* --m: the width of one empty edge beside the page */
  .edges { display: block; position: absolute; inset: 0; overflow: clip; pointer-events: none; z-index: -1; --m: calc((100% - 1100px) / 2);
    --note: clamp(18px, calc((100vw - 1100px) / 16), 28px); --paper-text: clamp(15px, calc((100vw - 1100px) / 19), 24px); }
}
@media print { .edges { display: none !important; } }
.jot { position: absolute; white-space: nowrap; }
.jot.l { left: calc(var(--m) * var(--x, .5)); translate: -50% 0; }
.jot.r { right: calc(var(--m) * var(--x, .5)); translate: 50% 0; }
.jot p { margin: 0; }
/* Handwriting leans past the end of its line; a little room keeps the last letter inside the writing mask */
.jot p.ink, .lbl { padding-inline: .25em; }
.sheet-title { padding-inline-end: .25em; }
.jot .red { color: var(--ink-red); font-palette: --red-ink; }
.jot .sum { text-align: end; font-variant-numeric: tabular-nums; }
.jot .total { border-top: 1.5px solid currentColor; }
.jot .box { display: inline-block; border: 1.5px solid currentColor; border-radius: 3px; padding: 0 .3em; white-space: nowrap; }
/* Ink straight on the desk: blue-black by day, chalk at night */
.jot.desk-ink { color: #2b3a5c; font: 400 var(--note)/1.5 var(--hand); font-palette: --blue-ink; opacity: .88; text-align: center;
  white-space: normal; text-wrap: balance; max-width: calc(2 * var(--m) * min(var(--x), 1 - var(--x)) - 24px); }
@media (prefers-color-scheme: dark) {
  :root:not(:has(#theme:checked)) .jot.desk-ink { color: #d6cdb6; font-palette: --chalk; opacity: .72; }
  :root:not(:has(#theme:checked)) .jot.desk-ink .red { color: #e9876b; font-palette: --chalk-red; }
  :root:not(:has(#theme:checked)) .jot.stain svg { stroke: rgba(214, 170, 120, .13); }
}
@media (prefers-color-scheme: light) {
  :root:has(#theme:checked) .jot.desk-ink { color: #d6cdb6; font-palette: --chalk; opacity: .72; }
  :root:has(#theme:checked) .jot.desk-ink .red { color: #e9876b; font-palette: --chalk-red; }
  :root:has(#theme:checked) .jot.stain svg { stroke: rgba(214, 170, 120, .13); }
}
/* Paper on the desk: sticky notes, index cards, a torn strip, receipts (paper stays paper at night) */
.jot:is(.sticky, .card, .strip, .receipt) { color: var(--ink); font: 400 var(--paper-text)/1.65 var(--hand); font-palette: --blue-ink;
  white-space: normal; box-shadow: 0 1px 1px rgba(27, 34, 48, .1), 0 18px 30px -18px var(--shadow); }
.jot.sticky { width: clamp(128px, calc(var(--m) * .6), 250px); aspect-ratio: 1 / .92; padding: .8em 1em; background: #efe2bd var(--grain); }
.jot.pink { background-color: #efd6c6; }
.jot.teal { background-color: #d7e5dd; }
.jot.card { width: clamp(140px, calc(var(--m) * .7), 300px); padding: .45em 1em .8em; background: #fbf8f1;
  background-image: linear-gradient(to bottom, transparent calc(1.65em - 1px), rgba(64, 104, 156, .22) calc(1.65em - 1px));
  background-size: 100% 1.65em; background-position: 0 .45em; }
.jot .card-top { color: var(--ink-red); font-palette: --red-ink; }
.jot.strip { width: clamp(128px, calc(var(--m) * .56), 240px); padding: .4em 1.1em .9em; background: var(--paper);
  background-image: var(--grain), linear-gradient(to bottom, transparent calc(1.65em - 1px), var(--ink-line) calc(1.65em - 1px));
  background-size: auto, 100% 1.65em; background-position: 0 0, 0 .4em; clip-path: polygon(0 0, 100% 2%, 98% 100%, 3% 97%); }
.jot.receipt { width: clamp(128px, calc(var(--m) * .5), 220px); padding: 1em 1em 1.2em; background: #faf8f2; }
.jot .print { font: 400 clamp(11px, .6em, 14px)/2.2 var(--body); color: var(--ink-soft); border-bottom: 1px dashed #d6cfbf; }
.jot.receipt .red { margin-top: .25em; }
.jot.taped::before { content: ""; position: absolute; top: -11px; left: 50%; width: 38%; height: 22px; translate: -50% 0; rotate: -4deg;
  background: rgba(255, 255, 255, .5); box-shadow: 0 1px 2px rgba(27, 34, 48, .12); }
.jot.stain { width: clamp(90px, calc(var(--m) * .42), 170px); }
.jot.stain svg { display: block; width: 100%; height: auto; fill: none; stroke: rgba(124, 84, 44, .2); }
/* Pen marks: underlines, ticks, a ring around a time, a small arrow */
.jot .mk { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.jot .mk.u { display: block; width: 85%; height: .35em; margin: .1em auto 0; }
.jot .mk.t { width: .8em; height: .65em; vertical-align: -.05em; }
.jot .mk.a { width: 2em; height: .75em; vertical-align: middle; }
.jot .ring { position: relative; display: inline-block; padding: 0 .35em; }
.jot .mk.o { position: absolute; left: -.3em; top: -.15em; width: calc(100% + .6em); height: calc(100% + .3em); }
/* Writing, line after line, then the marks; paper lands first */
.jot > :nth-child(2) { --at: .65s; } .jot > :nth-child(3) { --at: 1.3s; } .jot > :nth-child(4) { --at: 1.95s; } .jot > :nth-child(5) { --at: 2.6s; }
.jot:is(.sticky, .card, .strip, .receipt) > :nth-child(1) { --at: .45s; } .jot:is(.sticky, .card, .strip, .receipt) > :nth-child(2) { --at: 1.1s; }
.jot:is(.sticky, .card, .strip, .receipt) > :nth-child(3) { --at: 1.75s; } .jot:is(.sticky, .card, .strip, .receipt) > :nth-child(4) { --at: 2.4s; }
.jot:is(.sticky, .card, .strip, .receipt) > :nth-child(5) { --at: 3.05s; }
.jot > svg.mk.u { --at: 2.1s; }
.js [data-ink].inked .ink .mk .stroke { animation-delay: calc(var(--at, 0s) + .55s); }
.js .jot:is(.sticky, .card, .strip, .receipt)[data-ink] { opacity: 0; }
.js .jot:is(.sticky, .card, .strip, .receipt).inked { animation: settle .45s ease-out both; }
@keyframes settle { from { opacity: 0; margin-top: -12px; } to { opacity: 1; margin-top: 0; } }

/* Below 1400px the edges have no room: a few scraps peek in from the side, in the space above a section */
.about, .how, .showcase, .talk { position: relative; overflow-x: clip; }
.jot.peek { top: 12px; z-index: 1; width: auto; min-width: 136px; aspect-ratio: auto; padding: .5em .9em; --paper-text: 16px; white-space: nowrap; }
.jot.peek.pr { right: -24px; padding-right: calc(.9em + 24px); } .jot.peek.pl { left: -24px; padding-left: calc(.9em + 24px); }
.pk-about { rotate: -5deg; } .pk-how { rotate: 4deg; } .pk-showcase { rotate: 5deg; } .pk-talk { rotate: -3deg; }
@media (min-width: 1400px) { .jot.peek { display: none; } }

/* Today's date fills the notebook and the tablet (ink.js); the placeholder day never flashes */
.dating [data-today] { visibility: hidden; }

/* Legal pages and the 404 */
.legal { max-width: 780px; padding-block: clamp(28px, 6vw, 56px) clamp(60px, 9vw, 100px); }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); }
.legal h2 { margin: 34px 0 8px; font: 600 1.3rem/1.4 var(--body); }
.legal > p { margin: 0 0 12px; color: var(--soft); max-width: 66ch; }
.legal .updated { font-size: .92rem; }
.legal a { color: var(--text); text-decoration-color: var(--red); text-underline-offset: 4px; }
.legal .note-card { margin: 12px 0 32px; }
.legal > ul { margin: 0 0 12px; padding-inline-start: 1.2em; max-width: 66ch; color: var(--soft); }
.legal > ul li { margin: 0 0 8px; }
.legal li::marker { color: var(--red); }
.legal b { color: var(--text); font-weight: 600; }
/* "In short": the page's promises on a slip of the notebook's paper */
.in-short { position: relative; max-width: 640px; margin: 18px 0 8px; padding: 14px 24px 12px; padding-inline-start: 64px; border-radius: 3px;
  color: var(--ink); background: var(--paper); background-image: var(--grain); }
.in-short::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 46px; width: 5px; border-inline: 1px solid var(--ink-red); opacity: .7; }
.legal .in-short h2 { margin: 0; font: 700 1.9rem/1.6 var(--hand); font-palette: --blue-ink; }
.in-short ul { margin: 0; padding: 0; list-style: none; }
.in-short li { padding: 9px 0; border-top: 1px solid var(--ink-line); color: var(--ink-soft); }
@media (max-width: 520px) { .in-short { padding-inline: 14px; padding-inline-start: 38px; } .in-short::before { inset-inline-start: 22px; } }

/* Writing, once, when the page opens (owner, 2026-10-16; timing 18 Oct: the notebook in 6 seconds, the computer in 3):
   the pen writes each ledger line right to left, with a soft wet edge, and strikes out the moved follow-up after writing it; beside it the tablet types the
   same day in quick bursts and is done while the pen is still on its second line. Not tied to scrolling. Visitors who
   ask for less motion, or press "skip the writing", see the finished page; so do browsers without animation support. */
@property --ink-front { syntax: "<percentage>"; inherits: false; initial-value: 112%; }
.sheet-title, .ledger li {
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  animation: pen 1s cubic-bezier(.33, .12, .4, 1) both; }
.sheet-title { animation-delay: .3s; }
.ledger li:nth-child(1) { animation-delay: 1.3s; }
.ledger li:nth-child(2) { animation-delay: 2.2s; }
.ledger li:nth-child(3) { animation-delay: 3.1s; }
.ledger li:nth-child(4) { animation-delay: 4s; }
.ledger li:nth-child(5) { animation-delay: 4.9s; }
.ledger s { animation: strike .5s ease-out 3.2s both; }
@keyframes pen { from { --ink-front: 0%; } to { --ink-front: 112%; } }
@keyframes strike { from { text-decoration-color: transparent; } to { text-decoration-color: var(--ink); } }

.desk .screen-title, .log li { animation: type .32s steps(28, end) both; }
.desk .screen-title { animation-delay: .7s; }
.log li:nth-child(1) { animation-delay: 1.1s; }
.log li:nth-child(2) { animation-delay: 1.5s; }
.log li:nth-child(3) { animation-delay: 1.9s; }
.log li:nth-child(4) { animation-delay: 2.3s; }
.log li:nth-child(5) { animation-delay: 2.7s; }
.cursor { animation: blink 1.1s steps(1) 3s 4; } /* a few blinks once the tablet is done, then still */
@keyframes type { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes type-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes blink { 50% { opacity: 0; } }
[dir="ltr"] .desk .screen-title, [dir="ltr"] .log li { animation-name: type-ltr; }

/* Further down, handwriting waits until it scrolls into view and then writes once (ink.js adds .js to the page and
   .inked to each [data-ink] it sees). Not tied to scrolling after that: it never rewinds. */
.js [data-ink] .ink { -webkit-mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to left, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front)); --ink-front: 0%; }
.js [data-ink].inked .ink { animation: pen var(--dur, .7s) cubic-bezier(.33, .12, .4, 1) var(--at, 0s) both; }
.js [data-ink] .ink:dir(ltr), :is(.sheet-title, .ledger li):dir(ltr) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front));
  mask-image: linear-gradient(to right, #000 calc(var(--ink-front) - 12%), transparent var(--ink-front)); }
.js [data-ink] .stroke, .js .make:has(.sketch[data-ink]) .pen-u path { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; }
.js [data-ink].inked .stroke { animation: draw var(--dur, .45s) ease-out var(--at, 0s) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media print { .js [data-ink] * { animation: none !important; -webkit-mask-image: none !important; mask-image: none !important; stroke-dashoffset: 0 !important; } }
/* The sketch, in reading order: your business, then each connection from the top right, the red arrow, the guide */
.k-core { --at: 0s; --dur: .55s; } .lbl.core { --at: .4s; }
.w-tr { --at: 1s; --dur: .25s; } .k-tr { --at: 1.2s; } .l-tr { --at: 1.55s; --dur: .5s; }
.w-tl { --at: 2s; --dur: .25s; } .k-tl { --at: 2.2s; } .l-tl { --at: 2.55s; --dur: .5s; }
.w-br { --at: 3s; --dur: .25s; } .k-br { --at: 3.2s; } .l-br { --at: 3.55s; --dur: .5s; }
.w-bl { --at: 4s; --dur: .25s; } .k-bl { --at: 4.2s; } .l-bl { --at: 4.55s; --dur: .5s; }
.k-arc { --at: 5.1s; } .k-head { --at: 5.5s; --dur: .2s; } .lbl.redtext { --at: 5.7s; --dur: .8s; }
.g-arc { --at: 6.6s; --dur: .5s; } .g-head { --at: 7.05s; --dur: .2s; }
.js .make:has(.sketch.inked) .points li .pen-u path { animation: draw .45s ease-out 7.4s forwards; }
.js .make:has(.sketch.inked) .points li:nth-child(2) .pen-u path { animation-delay: 7.85s; }
.js .make:has(.sketch.inked) .points li:nth-child(3) .pen-u path { animation-delay: 8.3s; }

.desk:has(#ledger:target) :is(.sheet-title, .ledger li, .ledger s, .screen-title, .log li, .cursor) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.sheet-title, .ledger li, .ledger s, .screen-title, .log li, .cursor) { animation: none; }
  .qa summary::after { transition: none; }
}

/* Day and night fade into each other instead of switching at once (small controls follow their own quicker hover fade) */
body, .sheet, .screen, .phone, .laptop .lid, .laptop .base, .sketch, .calendar, .site-foot, .brand path,
.points li, .principles li, .mail, h1, h2, h3, p {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, box-shadow .6s ease, text-decoration-color .6s ease; }

/* No lone words on a last line */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.intro p { text-wrap: balance; }