/* Adrees Ilyas — portfolio. Theme: a vintage document-control office.
Kraft paper, ink navy, stamp red and amber. Night office (dark) with a desk-lamp glow.
Static, no build step, no external requests. Fonts are local (SIL Open Font License). */
/* Fonts: woff2 subsets, declared in the vintage layer at the end of this file */
/* ---------- Tokens: day office ---------- */
:root {
--bg: #EEE3CC;
--paper: #FBF7EC;
--paper-2: #F5EEDC;
--text: #1B2A41;
--text-2: #36405A;
--text-3: #4C505E;
--line: #D6C6A6;
--line-strong: #AE9B78;
--red: #B42318;
--red-soft: rgba(180, 35, 24, 0.10);
--amber: #D69A2D;
--amber-ink: #85560A;
--highlight: rgba(244, 196, 64, 0.55);
--ok: #24694A;
--btn-bg: #1B2A41;
--btn-fg: #FBF7EC;
--focus: #0B5FC7;
--f1: #EDD6A3; --f2: #E8DDC0; --f3: #E3CC9E;
--tab-shadow: rgba(80, 55, 15, 0.18);
--desk: #1B2A41;
--desk-fg: #F4EBDA;
--desk-2: #C8BFAE;
--desk-line: rgba(244, 235, 218, 0.12);
--card-rule: rgba(60, 100, 170, 0.18);
--card-red: rgba(190, 40, 30, 0.55);
--map-land: #EFE4CB;
--map-hatch: rgba(27, 42, 65, 0.16);
--shadow-sm: 0 1px 1px rgba(70, 45, 10, 0.08), 0 2px 6px -2px rgba(70, 45, 10, 0.14);
--shadow: 0 1px 2px rgba(70, 45, 10, 0.08), 0 12px 28px -12px rgba(70, 45, 10, 0.35);
--shadow-lg: 0 2px 4px rgba(70, 45, 10, 0.08), 0 26px 50px -20px rgba(70, 45, 10, 0.45);
--grain-opacity: 0.07;
--lamp: radial-gradient(52vmax 38vmax at 84% 6%, rgba(255, 226, 170, 0.55), transparent 70%);
--scrim: rgba(251, 247, 236, 0.86);
--glow-1: rgba(251, 247, 236, 0.72); --glow-2: rgba(251, 247, 236, 0.4); --copy-shadow: 0 1px 2px rgba(251, 247, 236, 0.85);
--tape-bg: #F6EEDA;
--far-o: .4; --prop-o: .78;
--cream-bg: #FBF7EC; --cream-fg: #1B2A41; --cream-bd: #1B2A41;
--wa-bg: #2F5D50; --wa-fg: #F7F1E3;
--fiber: url("../img/grain.png");
--vignette: radial-gradient(ellipse 130% 95% at 50% 35%, transparent 52%, rgba(95, 62, 20, 0.22) 100%);
--edge-shade: linear-gradient(90deg, rgba(90, 60, 20, 0.10), transparent 22%, transparent 78%, rgba(90, 60, 20, 0.10));
--folder-lamp: none;
--grid: rgba(43, 92, 158, 0.075);
--binder-1: #23395B; --binder-2: #9E2A2B; --binder-3: #2F5D50; --binder-4: #A7671B; --binder-5: #4A5568; --binder-6: #6B4226;
--font: "Plex", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans Arabic", Tahoma, sans-serif;
--type: "Type", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
--max: 1200px;
--gutter: 16px;
--radius: 10px;
--header-h: 68px;
--ease: cubic-bezier(.2, .7, .2, 1);
color-scheme: light;
}
/* ---------- Tokens: night office ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #14110D; --paper: #241F18; --paper-2: #2B251C;
--text: #F3EAD7; --text-2: #D7CBB4; --text-3: #B1A58F;
--line: #3B3226; --line-strong: #5A4C3A;
--red: #F07466; --red-soft: rgba(240, 116, 102, 0.12);
--amber: #EBA83E; --amber-ink: #F2B85A; --highlight: rgba(235, 168, 62, 0.35);
--ok: #63D39C; --btn-bg: #F3EAD7; --btn-fg: #14110D; --focus: #7DB9FF;
--f1: #2C2519; --f2: #262017; --f3: #30281B; --tab-shadow: rgba(0, 0, 0, 0.5);
--desk: #0D0B08; --desk-fg: #F3EAD7; --desk-2: #C9BDA6; --desk-line: rgba(243, 234, 215, 0.08);
--card-rule: rgba(140, 170, 230, 0.10); --card-red: rgba(240, 116, 102, 0.45);
--map-land: #2B251C; --map-hatch: rgba(243, 234, 215, 0.10);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 30px -12px rgba(0, 0, 0, 0.7);
--shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 28px 56px -20px rgba(0, 0, 0, 0.85);
--grain-opacity: 0.09;
--lamp: radial-gradient(56vmax 42vmax at 84% 8%, rgba(255, 186, 92, 0.26), transparent 70%);
--scrim: rgba(14, 12, 9, 0.78); --glow-1: rgba(14, 12, 9, 0.6); --glow-2: rgba(14, 12, 9, 0.35); --copy-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); --glow-1: rgba(14, 12, 9, 0.6); --glow-2: rgba(14, 12, 9, 0.35); --copy-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); --tape-bg: #211C15; --far-o: .26; --prop-o: .62; --cream-bg: #F3EAD7; --cream-fg: #14110D; --cream-bd: #C9B998; --wa-bg: #2E6A55; --wa-fg: #F3EAD7;
--fiber: url("../img/grain.png");
--vignette: radial-gradient(ellipse 120% 90% at 30% 20%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
--edge-shade: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.35));
--folder-lamp: radial-gradient(1100px 520px at 10% 0%, rgba(255, 186, 92, 0.10), transparent 70%);
--grid: rgba(255, 214, 150, 0.045);
color-scheme: dark;
}
}
:root[data-theme="dark"] {
--bg: #14110D; --paper: #241F18; --paper-2: #2B251C;
--text: #F3EAD7; --text-2: #D7CBB4; --text-3: #B1A58F;
--line: #3B3226; --line-strong: #5A4C3A;
--red: #F07466; --red-soft: rgba(240, 116, 102, 0.12);
--amber: #EBA83E; --amber-ink: #F2B85A; --highlight: rgba(235, 168, 62, 0.35);
--ok: #63D39C; --btn-bg: #F3EAD7; --btn-fg: #14110D; --focus: #7DB9FF;
--f1: #2C2519; --f2: #262017; --f3: #30281B; --tab-shadow: rgba(0, 0, 0, 0.5);
--desk: #0D0B08; --desk-fg: #F3EAD7; --desk-2: #C9BDA6; --desk-line: rgba(243, 234, 215, 0.08);
--card-rule: rgba(140, 170, 230, 0.10); --card-red: rgba(240, 116, 102, 0.45);
--map-land: #2B251C; --map-hatch: rgba(243, 234, 215, 0.10);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 14px 30px -12px rgba(0, 0, 0, 0.7);
--shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.45), 0 28px 56px -20px rgba(0, 0, 0, 0.85);
--grain-opacity: 0.09;
--lamp: radial-gradient(56vmax 42vmax at 84% 8%, rgba(255, 186, 92, 0.26), transparent 70%);
--scrim: rgba(14, 12, 9, 0.78); --tape-bg: #211C15; --far-o: .26; --prop-o: .62; --cream-bg: #F3EAD7; --cream-fg: #14110D; --cream-bd: #C9B998; --wa-bg: #2E6A55; --wa-fg: #F3EAD7;
--fiber: url("../img/grain.png");
--vignette: radial-gradient(ellipse 120% 90% at 30% 20%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
--edge-shade: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.35));
--folder-lamp: radial-gradient(1100px 520px at 10% 0%, rgba(255, 186, 92, 0.10), transparent 70%);
--grid: rgba(255, 214, 150, 0.045);
color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 56px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
margin: 0; color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6;
background-color: var(--bg); background-image: var(--fiber);
overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
html[lang="ar"] body { line-height: 1.75; }
body { position: relative; }
/* Lamp glow + vignette over the first screen; scrolls with the page (a fixed full-screen layer cost frames on scroll) */
body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: max(100vh, 760px); z-index: -1; pointer-events: none; background-image: var(--lamp), var(--vignette);
-webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
html[dir="rtl"] body::before { transform: scaleX(-1); }
/* Paper grain: a small tiled SVG noise in the page and folder backgrounds (no full-screen overlay to composite) */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; }
html[lang="ar"] :is(h1, h2, h3, h4) { line-height: 1.4; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--highlight); color: var(--text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
/* Night office: the cream papers sit a little darker so they are not the loudest blocks */
:root[data-active-theme="dark"] { --slip-bg: #E9DFC8; }
/* Focus ring keeps 3:1 on the navy desk surfaces and on the cream transmittal slip */
.desk, .cert-total, .site-footer { --focus: #9CC8FF; }
.slip { --focus: #0B5FC7; }
@media (max-width: 319px) { .brand-name { display: none; } .header-actions { gap: 4px; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-js .js-only { display: none !important; }
bdi { unicode-bidi: isolate; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.nowrap { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.typed { font-family: var(--type); }
html[lang="ar"] .typed-ar-safe { font-family: var(--font); }
.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 100; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .flip { transform: scaleX(-1); }
/* ---------- Rubber stamps ---------- */
.stamp {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
border: 3px double currentColor; border-radius: 6px; color: var(--red);
font-family: var(--type); font-weight: 800; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
transform: rotate(-6deg); mix-blend-mode: multiply; opacity: .92;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
:root[data-active-theme="dark"] .stamp { mix-blend-mode: normal; }
.stamp.navy { color: var(--text); }
.stamp.green { color: var(--ok); }
.stamp.amber { color: var(--amber-ink); }
html[lang="ar"] .stamp { font-family: var(--font); letter-spacing: normal; text-transform: none; font-size: 1rem; }
html[lang="ar"] .hero-scene .s-status { font-family: var(--font); }
/* ---------- Buttons ---------- */
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 50px; padding: 12px 22px; border-radius: 8px;
font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none;
border: 1.5px solid transparent; cursor: pointer;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--btn-bg) 60%, #000), var(--shadow-sm); }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 3px 0 0 color-mix(in srgb, var(--red) 60%, #000), var(--shadow-sm); }
:root[data-active-theme="dark"] .btn-red { color: #14110D; }
.btn-cream { background: var(--cream-bg); color: var(--cream-fg); border-color: var(--cream-bd); box-shadow: 0 3px 0 0 var(--cream-bd), var(--shadow-sm); }
.btn-green { background: var(--wa-bg); color: var(--wa-fg); box-shadow: 0 3px 0 0 color-mix(in srgb, var(--wa-bg) 55%, #000), var(--shadow-sm); }
.btn-outline { background: transparent; color: var(--text); border-color: currentColor; }
.btn-outline:hover { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.btn-ghost { background: var(--paper); color: var(--text); border-color: var(--line-strong); box-shadow: 0 2px 0 0 var(--line); }
.btn-ghost:hover { border-color: var(--text); }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .9375rem; }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 8px;
background: var(--paper); border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; font-size: .9375rem;
box-shadow: 0 2px 0 0 var(--line); transition: border-color .2s ease;
}
.icon-btn:hover { border-color: var(--line-strong); }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--bg);
border-bottom: 3px double var(--line-strong);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; white-space: nowrap; margin-inline-end: auto; }
.brand-mark { width: 40px; height: 40px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 1.0625rem; }
.brand-role { font-family: var(--type); font-size: max(var(--min14), .75rem); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
html[lang="ar"] .brand-role { font-family: var(--font); font-size: max(var(--min14), .8125rem); text-transform: none; }
.site-nav ul { display: flex; gap: 2px; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 6px; text-decoration: none; color: var(--text-2); font-weight: 500; font-size: .9375rem; }
.site-nav a:hover { color: var(--text); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.site-nav a[aria-current="true"] { color: var(--text); background: var(--highlight); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.theme-btn .moon { display: none; }
:root[data-active-theme="dark"] .theme-btn .sun { display: none; }
:root[data-active-theme="dark"] .theme-btn .moon { display: block; }
.menu-btn { display: none; }
.menu-btn .close { display: none; }
.site-header.open .menu-btn .open-i { display: none; }
.site-header.open .menu-btn .close { display: block; }
@media (max-width: 1099px) {
.hide-md { display: none !important; }
.js .menu-btn { display: inline-flex; }
.js .site-nav { position: absolute; inset-inline: 0; top: 100%; background: var(--bg); border-bottom: 3px double var(--line-strong); box-shadow: var(--shadow-lg); display: none; }
.js .site-header.open .site-nav { display: block; }
.js .site-nav ul { flex-direction: column; padding: 10px var(--gutter) 18px; gap: 4px; }
.js .site-nav a { padding: 12px 14px; font-size: 1.0625rem; }
.js .site-nav li + li { border-top: 1px dashed var(--line-strong); }
html:has(.site-header.open) { overflow: hidden; }
.no-js .header-inner { flex-wrap: wrap; }
.no-js .site-nav { order: 3; flex-basis: 100%; }
.no-js .site-nav ul { flex-wrap: wrap; gap: 0 4px; }
}
@media (max-width: 479px) {
.brand-role { display: none; }
.brand-mark { width: 34px; height: 34px; }
.header-inner { gap: 8px; }
.header-actions { gap: 6px; }
}
/* ---------- Hero: a vintage document-control office in three layers ---------- */
/* far: blueprint sheet with the KSA map · middle: desk props at the page edges · near: the desk scene.
The text column sits on a soft panel and nothing overlaps it. Three type sizes only: display, statement, body.
Spacing on an 8-pt grid. Only stamps are tilted. */
.hero {
position: relative; isolation: isolate; overflow: hidden;
--ws: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
--fs-display: clamp(2.25rem, 3vw + 1.5rem, 4rem);
--fs-statement: clamp(1.375rem, .9vw + 1.05rem, 1.75rem);
--fs-body: 1rem;
--mono-ls: .12em;
}
.hero-wrap { position: relative; z-index: 3; padding-block: 40px 32px; }
.wall-left, .wall-right { display: none; }
/* ---------- The wall board: cork in a wooden frame, twine strung across, typed cards clipped on ---------- */
.hero {
--cork: #B98A55; --cork-dot: rgba(92, 60, 24, 0.28); --cork-lite: rgba(255, 238, 200, 0.22); --frame-wood: #6B4627; --frame-edge: #4E321B;
--twine: #E6D2A4; --card-paper: #FBF7EC; --card-ink: #1B2A41; --card-ink-2: #3D4A5F; --tab-manila: #E8CC8F; --tab-manila-2: #D7B36E;
--memo-paper: #FFFDF6; --wywo-paper: #DCE8D6; --wywo-ink: #1E4D3E; --wywo-band: #2F5D50; --tag-kraft: #CFAE76;
--wainscot: #DCCBA8; --cal-top: #A8322D; --desk-wood: #B9895A; --desk-wood-2: #8E623B; --desk-wood-3: #A87A4D;
}
:root[data-active-theme="dark"] .hero {
--cork: #6E5335; --cork-dot: rgba(0, 0, 0, 0.35); --cork-lite: rgba(255, 210, 150, 0.08); --frame-wood: #3E2A17; --frame-edge: #2A1C0F;
--twine: #B9A47A; --card-paper: #E9DFC8; --memo-paper: #EDE5D2; --wywo-paper: #C9D6C2; --tab-manila: #C9AE72; --tab-manila-2: #B0945A; --tag-kraft: #B69561;
--wainscot: #1B160F; --desk-wood: #5E4329; --desk-wood-2: #3E2C1A; --desk-wood-3: #4E3720;
}
.board { position: relative; margin-top: 52px; pointer-events: auto; }
.board-face {
position: relative; display: grid; gap: 10px; padding: 12px 22px 22px;
background: radial-gradient(circle at 30% 40%, var(--cork-dot) 0 1px, transparent 1.6px) 0 0 / 7px 7px,
radial-gradient(circle at 70% 70%, var(--cork-lite) 0 1px, transparent 1.6px) 0 0 / 9px 9px, var(--cork);
border: 14px solid var(--frame-wood); border-radius: 4px;
box-shadow: inset 0 0 0 2px var(--frame-edge), inset 0 6px 14px -6px rgba(0, 0, 0, 0.45), 0 22px 30px -22px rgba(30, 18, 6, 0.75);
}
:root[data-active-theme="dark"] .board-face { background-image: radial-gradient(ellipse 70% 90% at 100% 0%, rgba(255, 186, 92, 0.16), transparent 70%),
radial-gradient(circle at 30% 40%, var(--cork-dot) 0 1px, transparent 1.6px), radial-gradient(circle at 70% 70%, var(--cork-lite) 0 1px, transparent 1.6px);
background-size: auto, 7px 7px, 9px 9px; }
/* Section tabs stick up from the top of the board like file tabs */
.board-tabs { position: absolute; z-index: 1; bottom: calc(100% - 4px); inset-inline-start: 26px; display: flex; gap: 4px; }
.btab {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 4px; border-radius: 8px 8px 0 0; border: 1px solid rgba(78, 50, 27, 0.45); border-bottom: 0;
background: linear-gradient(var(--tab-manila), var(--tab-manila-2)); color: var(--card-ink); text-decoration: none;
font-family: var(--type); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); transform-origin: 50% 100%; transition: transform .2s var(--ease);
}
.btab:hover, .btab:focus-visible { transform: translateY(-3px); }
html[lang="ar"] .btab { font-family: var(--font); font-size: .875rem; letter-spacing: normal; text-transform: none; }
/* Twine: a sagging string across the board, cards hang from it */
.string { position: relative; display: flex; align-items: flex-start; gap: 18px; padding-top: 16px; }
.string::before {
content: ""; position: absolute; inset-inline: -22px; top: 2px; height: 14px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M0 3Q50 13 100 3' fill='none' stroke='%2300000055' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 2Q50 12 100 2' fill='none' stroke='%23E6D2A4' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Typed cards (paper stays light in both themes, so the ink is dark: AA by construction) */
.card {
position: relative; margin: 0; padding: 18px 16px 14px; background: var(--card-paper); color: var(--card-ink); border-radius: 2px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 10px 14px -10px rgba(30, 18, 6, 0.6); transform-origin: 50% 0;
transition: transform .25s var(--ease);
}
a.card { display: block; text-decoration: none; }
.card:is(:hover, :focus-within) { transform: rotate(-1.2deg) translateY(-2px); }
[dir="rtl"] .card:is(:hover, :focus-within) { transform: rotate(1.2deg) translateY(-2px); }
/* Binder clip on the twine */
.bclip::before { content: ""; position: absolute; top: -12px; left: 50%; width: 28px; height: 18px; margin-left: -14px; border-radius: 2px 2px 5px 5px; background: linear-gradient(#3A3A3A, #121212); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.35); }
.bclip::after { content: ""; position: absolute; top: -24px; left: 50%; width: 18px; height: 14px; margin-left: -9px; border: 2px solid #A7ADB5; border-bottom: 0; border-radius: 8px 8px 0 0; }
/* Wooden clothes-peg (luggage tag) */
.peg::before { content: ""; position: absolute; top: -16px; left: 50%; width: 10px; height: 30px; margin-left: -5px; border-radius: 3px; background: linear-gradient(90deg, #C79A62, #E3BC86 50%, #B98A55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.card :focus-visible, a.card:focus-visible { outline: 3px solid #0B5FC7; outline-offset: 3px; }
.name-card { padding: 18px 24px 12px; background-image: linear-gradient(transparent 0 calc(100% - 1px), rgba(168, 50, 45, 0.22) 0) ; }
.nameplate { margin: 0; white-space: nowrap; font-family: "Typewriter", var(--type); font-size: clamp(2.25rem, 2.2vw + 1rem, 3.25rem); font-weight: 700; line-height: 1.05; letter-spacing: .02em; color: var(--card-ink); text-shadow: 1px 1px 0 rgba(27, 42, 65, 0.16); }
html[lang="ar"] .nameplate { font-family: var(--font); line-height: 1.25; letter-spacing: normal; }
.nameplate .ink::after { background: #B3261E; }
.eyebrow { display: block; margin-top: 8px; font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; color: var(--card-ink-2); }
html[lang="ar"] .eyebrow { font-family: var(--font); font-size: .9375rem; font-weight: 600; text-transform: none; }
.type-on { display: inline; }
.type-on > span { white-space: nowrap; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-inline-start: 4px; vertical-align: -.18em; background: #B3261E; }
/* Ink-marker underline under the surname */
.ink { position: relative; display: inline-block; }
.ink::after { content: ""; position: absolute; inset-inline: -.02em -.04em; bottom: .02em; height: .08em; border-radius: 999px; background: var(--red); }
html[lang="ar"] .ink::after { bottom: -.12em; }
.statement { max-width: 400px; font-size: 1.375rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
html[lang="ar"] .statement { font-size: 1.3125rem; line-height: 1.45; }
.sub { max-width: 250px; padding-top: 16px; font-size: .875rem; line-height: 1.55; color: var(--card-ink-2); background-image: repeating-linear-gradient(transparent 0 23px, rgba(43, 92, 158, 0.16) 23px 24px); background-position: 0 14px; }
html[lang="ar"] .sub { max-width: 270px; line-height: 1.6; }
.sub2 { display: block; margin-top: 4px; font-weight: 700; color: var(--card-ink); }
.loc-tag { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 10px 14px 10px 22px; background: var(--tag-kraft); font-family: var(--type); font-size: max(var(--min14), .8125rem); font-weight: 700; letter-spacing: .04em; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); }
[dir="rtl"] .loc-tag { padding: 10px 22px 10px 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
html[lang="ar"] .loc-tag { font-family: var(--font); letter-spacing: normal; }
.loc-tag .icon { width: 16px; height: 16px; color: #8E1F17; }
.loc-tag.peg::before { top: -22px; }
/* Contact slips */
.contacts { align-items: stretch; }
.memo { min-width: 0; padding-top: 14px; background: var(--memo-paper); border-top: 6px solid #A8322D; }
.memo-h { display: block; font-family: var(--type); font-size: 1rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #8E1F17; }
.memo-to { display: block; margin-top: 6px; padding-bottom: 6px; border-bottom: 1px dashed rgba(27, 42, 65, 0.35); font-family: var(--type); font-size: max(var(--min14), .8125rem); font-weight: 700; overflow-wrap: anywhere; }
.memo-act { display: flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 6px; font-weight: 700; font-size: .875rem; text-decoration: underline; text-decoration-color: rgba(168, 50, 45, 0.6); text-underline-offset: 3px; }
.memo-act .icon { width: 16px; height: 16px; }
.wywo { min-width: 0; padding: 0 0 6px; background: var(--wywo-paper); color: var(--wywo-ink); }
.wywo-h { padding: 12px 12px 5px; background: var(--wywo-band); color: #F7F1E3; font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wywo-ph { padding: 6px 12px 0; font-family: var(--type); font-size: max(var(--min14), .8125rem); font-weight: 700; }
.wywo-acts { display: flex; flex-wrap: wrap; gap: 0 12px; padding-inline: 8px; }
.wywo-acts a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 4px; color: var(--wywo-ink); font-weight: 700; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.wywo-acts .icon { width: 16px; height: 16px; }
html[lang="ar"] :is(.memo-h, .memo-to, .wywo-h, .wywo-ph, .fc-stamp) { font-family: var(--font); letter-spacing: normal; text-transform: none; }
.ticket-stack { display: grid; gap: 14px; align-content: start; }
.filecopy { min-height: 64px; padding: 14px 14px 10px; background: var(--tab-manila); }
.fc-stamp { display: inline-block; padding: 2px 8px; border: 2px solid #8E1F17; color: #8E1F17; font-family: var(--type); font-size: max(var(--min14), .8125rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; rotate: -4deg; }
.fc-t { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; font-size: .875rem; }
.fc-t .icon { width: 16px; height: 16px; }
.bizcard { display: flex !important; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; background: #FFFFFF; border: 1px solid rgba(27, 42, 65, 0.15); }
:root[data-active-theme="dark"] .bizcard { background: #EDE7DA; }
.bc-in { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: #1F4E79; color: #FFFFFF; font-weight: 700; font-family: var(--font); }
.bc-t { display: grid; font-weight: 700; font-size: .875rem; line-height: 1.25; }
.bc-t small { font-weight: 600; color: var(--card-ink-2); font-size: max(var(--min14), .75rem); }
/* Key numbers: tent calendars standing on the desk */
.calendars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding: 18px 16px 22px; pointer-events: auto;
background: linear-gradient(var(--desk-wood) 0 70%, var(--desk-wood-2) 70% 78%, var(--desk-wood-3) 78%); border-radius: 3px; }
@media (min-width: 560px) { .calendars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cal { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 104px; text-decoration: none; color: var(--card-ink); background: var(--card-paper); border-radius: 3px;
box-shadow: 0 12px 12px -10px rgba(20, 12, 4, 0.75), 0 1px 0 rgba(0, 0, 0, 0.15); transform-origin: 50% 100%; transition: transform .2s var(--ease); }
.cal:hover, .cal:focus-visible { transform: translateY(-3px); }
.cal:focus-visible { outline: 3px solid #0B5FC7; outline-offset: 3px; }
/* two binding rings across the top */
.cal::before { content: ""; position: absolute; top: -5px; inset-inline: 22%; height: 10px; background: radial-gradient(circle, #2A2A2A 0 3px, transparent 3.5px) 0 0 / 50% 100% repeat-x; }
.cal-top { display: grid; place-items: center; min-height: 40px; padding: 8px 6px 4px; border-radius: 3px 3px 0 0; background: var(--cal-top); color: #FBF7EC; text-align: center;
font-family: var(--type); font-size: max(var(--min14), .6875rem); font-weight: 700; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; }
html[lang="ar"] .cal-top { font-family: var(--font); font-size: max(var(--min14), .8125rem); letter-spacing: normal; text-transform: none; }
.cal-page { flex: 1; display: grid; place-items: center; padding: 6px 4px 8px; perspective: 300px; background-image: linear-gradient(transparent calc(100% - 3px), rgba(0, 0, 0, 0.06) 0); }
.cal-num { display: block; font-family: "Typewriter", var(--type); font-size: 2.25rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; direction: ltr; transform-origin: 50% 0; }
.cal-num .plus { color: #B3261E; }
.cal-num.flip { animation: page-flip .16s ease-in-out 6; }
@keyframes page-flip { 50% { transform: rotateX(70deg); } }
/* Teleprinter tape: one moving line (transform only), sprocket holes along the top edge */
.tape {
position: relative; z-index: 3; height: 50px; overflow: hidden; border-block: 1px solid var(--line-strong);
background: radial-gradient(circle at 8px 6px, var(--bg) 0 2.5px, transparent 3px) 0 0 / 16px 12px repeat-x, var(--tape-bg);
}
.tape-track { display: flex; width: max-content; padding-top: 12px; }
.tape ul { display: flex; flex: none; }
.tape li { padding-inline: 16px; font-family: var(--type); font-size: var(--fs-body); font-weight: 700; line-height: 36px; letter-spacing: var(--mono-ls); text-transform: uppercase; white-space: nowrap; color: var(--text); }
.tape li::after { content: "·"; margin-inline-start: 32px; color: var(--red); }
/* Near layer: the desk scene. Under the text on small screens, a full-height panel on wide ones. */
.hero-scene { position: relative; z-index: 1; margin: 8px 0 0; }
.desk-band { display: none; }
@media (min-width: 1100px) { .desk-band { display: block; } }
.hero-scene .ill { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0; }
/* tablets: tall enough to show the whole wall (certificate, wall phone) above the desk */
@media (min-width: 640px) { .hero-scene .ill { aspect-ratio: 10 / 9; } }
@media (max-width: 639px) { .hero-scene .bot-layer.ill { aspect-ratio: auto; } }
.hero .stamp { mix-blend-mode: normal; }
.hero-scene .stamp { position: absolute; background: color-mix(in srgb, var(--paper) 72%, transparent); font-size: var(--fs-body); letter-spacing: var(--mono-ls); }
.hero-scene .s-status { inset-inline-end: 6%; bottom: 5%; }
/* Middle and far layers: only where there is room beside the text */
.props { display: none; }
@media (min-width: 1100px) {
/* Scene units: the desk scene is 640 x 800 units, scaled to the hero height. The board and the scene share
the header's content edges (--wsc); the board ends 40 px before the computer (scene x 170 = 470 units from its far edge). */
.hero { height: clamp(780px, calc(100svh - var(--header-h)), 830px); container-type: size;
--wsc: max(var(--gutter), calc((100cqw - var(--max)) / 2 + var(--gutter)));
/* px per scene unit: fills the hero height, but shrinks on narrow desktops so the board keeps >= 640 px */
--s: min(calc((100cqh - 50px) / 800), calc((100cqw - 2 * var(--wsc) - 680px) / 470));
--bw: min(700px, calc(100cqw - 2 * var(--wsc) - 470 * var(--s) - 40px)); }
.hero-wrap { position: absolute; inset: 0 0 50px; padding: 0; }
/* left wall (window with blinds, clock, wall calendar, coat hook, plant): ends under the board's frame */
.wall-left { display: block; position: absolute; bottom: 0; width: calc(var(--s) * 600); height: calc(var(--s) * 600); aspect-ratio: auto; border-radius: 0; inset-inline-end: calc(100% - var(--gutter) - 24px); pointer-events: none; }
.wall-right { display: block; position: absolute; bottom: 0; width: calc(var(--s) * 500); height: calc(var(--s) * 600); aspect-ratio: auto; border-radius: 0; inset-inline-start: calc(100% - var(--gutter)); pointer-events: none; }
html[dir="rtl"] :is(.wall-left, .wall-right) { transform: scaleX(-1); }
.board { position: absolute; top: clamp(12px, 1.5cqh, 32px); inset-inline-start: var(--gutter); width: var(--bw); margin: 0; }
.calendars { position: absolute; margin: 0; padding: 0; background: none; inset-inline-start: var(--gutter); bottom: calc(var(--s) * 40); width: min(560px, calc(var(--bw) - 20px)); gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tape { position: absolute; inset-inline: 0; bottom: 0; }
/* desk (scene y 292-400) and the wainscot above it (y 230-292) run the full width behind everything */
.desk-band { position: absolute; z-index: -1; bottom: 0; height: calc(var(--s) * 170); inset-inline: -100vw;
background: linear-gradient(var(--desk-wood-2) 0 2.94%, var(--wainscot) 2.94% 36.47%, var(--desk-wood) 36.47% 69.41%, var(--desk-wood-2) 69.41% 76.47%, var(--desk-wood-3) 76.47%); }
.hero-scene { position: absolute; margin: 0; top: auto; bottom: 50px; inset-inline-start: auto; inset-inline-end: var(--wsc); width: calc(var(--s) * 640); height: calc(var(--s) * 800); }
/* the scene's wall is the page itself, so a scene shorter than the hero has no top edge */
.hero-scene .ill .wall { fill: none; }
html[lang="ar"] .board .statement { font-size: 1.25rem; }
/* desk kept clear for the computer and the robot: the status stamp hangs on the wall; the window is behind the board */
.hero-scene .ill .win, .ghost.g-approved { display: none; }
/* the wall above the desk is spread out: certificate and clock high, shelf, then blueprint and phone */
/* scene units: top row on one line (y -330): certificate x 160-296, clock x 318-414 (96 across), box shelf x 450-632;
the blueprint centred below; the wall phone at the right edge, beside the window */
.hero-scene .ill .hot[href="#certifications"] { transform: translate(-23px, -184px); }
.hero-scene .ill .shelf { transform: translate(47px, -262px) scale(.85); }
/* Fade only the static scene into the page (rasterised once); the animated bot layer sits outside the mask */
.hero-scene .ill .desk-top { display: none; }
.hero-scene .ill { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.props { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.prop, .ghost { position: absolute; display: block; height: auto; opacity: var(--prop-o); }
/* far left edge, kept clear of the text column (it starts at --ws) */
.p-far { z-index: -1; inset-inline-start: -90px; top: 18%; width: min(460px, calc(var(--ws) + 40px)); rotate: -2deg; --z: .25; opacity: var(--far-o); }
.p-cabinet { inset-inline-start: -52px; top: 4%; width: 100px; height: 92%; --z: .3; }
.p-sheet { inset-inline-start: 56px; top: 6%; width: 140px; rotate: -3deg; --z: .6; }
.p-phone { inset-inline-start: calc(var(--ws) - 190px); top: 30%; width: 130px; --z: 1; }
.p-slip { inset-inline-start: 48px; top: 50%; width: 150px; rotate: 3deg; --z: .9; }
.p-ring { inset-inline-start: 150px; top: 47%; width: 84px; --z: .9; }
.p-stapler { inset-inline-start: 112px; bottom: 26%; width: 110px; rotate: 2deg; --z: 1.1; }
.p-folders { inset-inline-start: 16px; bottom: 7%; width: min(210px, calc(var(--ws) - 72px)); rotate: -2deg; --z: .55; }
/* scene side, right of the text panel */
.p-note, .p-roll { display: none; }
.ghost { opacity: .16; font-size: var(--fs-statement); }
.ghost::before { content: attr(data-label); } /* decorative text kept out of the DOM text */
:root[data-active-theme="dark"] .ghost { opacity: .2; }
.g-approved { inset-inline-start: calc(var(--ws) + 800px); top: 4%; rotate: -8deg; --z: .7; }
.g-rev { inset-inline-start: 24px; top: 1%; rotate: -8deg; --z: .7; }
html[lang="ar"] .ghost { font-family: var(--type); text-transform: uppercase; }
}
/* Gutter too narrow for the left props: keep only what fits */
@media (min-width: 1100px) { .p-far, .p-cabinet, .p-sheet, .p-phone, .p-slip, .p-ring, .p-stapler, .p-folders, .g-rev { display: none; } }
@media (min-width: 1400px) and (max-width: 1599px) { .p-sheet, .p-phone, .p-slip, .p-ring, .p-stapler { display: none; } }
@media (min-width: 1600px) and (max-width: 1699px) { .p-ring, .p-stapler { display: none; } }
@media (prefers-reduced-motion: no-preference) {
.js .rise { opacity: 0; translate: 0 16px; animation: rise .8s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 90ms + 60ms); }
.js .stamp-in { animation: thump .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0) * 150ms + 900ms); }
@keyframes rise { to { opacity: 1; translate: none; } }
@keyframes thump { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } to { opacity: .92; } }
/* Eyebrow types in word by word (opacity only), then a blinking caret */
.js .type-on > span { opacity: 0; animation: word-in .01s steps(1) forwards; animation-delay: .5s; }
.js .type-on > span:nth-child(2) { animation-delay: .72s; } .js .type-on > span:nth-child(3) { animation-delay: .94s; }
.js .type-on > span:nth-child(4) { animation-delay: 1.16s; } .js .type-on > span:nth-child(5) { animation-delay: 1.38s; }
.js .type-on > span:nth-child(6) { animation-delay: 1.6s; } .js .type-on > span:nth-child(n+7) { animation-delay: 1.82s; }
@keyframes word-in { to { opacity: 1; } }
.js .caret { opacity: 0; animation: caret 1.05s steps(1) 2s infinite; }
.tape-track { animation: tape-run 70s linear infinite; will-change: transform; }
html[dir="rtl"] .tape-track { animation-name: tape-run-rtl; }
.tape:hover .tape-track { animation-play-state: paused; }
.hero.is-off .caret, .hero.is-off .tape-track { animation-play-state: paused; }
@keyframes tape-run { to { transform: translateX(-50%); } }
@keyframes tape-run-rtl { to { transform: translateX(50%); } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
}
/* ---------- Sections are folders in a stack ---------- */
.folder { position: relative; margin-top: 58px; background-color: var(--f1); background-image: var(--folder-lamp), var(--edge-shade), var(--fiber); box-shadow: 0 -10px 22px -14px var(--tab-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.folder.f2 { background-color: var(--f2); }
.folder.f3 { background-color: var(--f3); }
.folder-tab {
position: absolute; top: -46px; height: 47px; inset-inline-start: calc(max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)) + var(--tab-x, 0px));
display: inline-flex; align-items: center; gap: 12px; padding: 0 26px;
background-color: inherit; background-image: var(--fiber); border-radius: 12px 12px 0 0;
font-family: var(--type); font-weight: 700; font-size: .875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text);
box-shadow: 0 -6px 14px -8px var(--tab-shadow);
}
.folder-tab .no { color: var(--red); }
.folder.f3 .folder-tab .no { color: color-mix(in srgb, var(--red) 85%, var(--text)); }
.folder.desk .folder-tab .no { color: #F07466; }
html[lang="ar"] .folder-tab { font-family: var(--font); letter-spacing: normal; text-transform: none; font-size: 1rem; }
.folder-tab .label-paper { background: var(--paper); padding: 4px 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 640px) {
.folder.t2 .folder-tab { --tab-x: 14%; } .folder.t3 .folder-tab { --tab-x: 28%; } .folder.t4 .folder-tab { --tab-x: 42%; } .folder.t5 .folder-tab { --tab-x: 56%; }
}
.folder > .wrap { padding-block: 56px 72px; }
@media (min-width: 1024px) { .folder > .wrap { padding-block: 72px 96px; } }
.section-head { margin-bottom: 36px; max-width: 820px; }
.section-head h2 { font-size: clamp(2rem, 2.6vw + 1.1rem, 3.25rem); line-height: 1.06; }
html[lang="en"] .section-head h2 { letter-spacing: -0.025em; }
html[lang="ar"] .section-head h2 { line-height: 1.35; font-size: clamp(1.875rem, 2.2vw + 1rem, 2.75rem); }
.hl { background: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Paper sheets and clips */
.paper { position: relative; background: var(--paper); border-radius: 3px; box-shadow: var(--shadow); }
.paper.lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.paper.lift:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--shadow-lg); }
.clip { position: absolute; top: -18px; inset-inline-end: 28px; width: 22px; height: 54px; color: #8C939E; pointer-events: none; }
.clip path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
:root[data-active-theme="dark"] .clip { color: #9AA1AA; }
/* Profile: personnel file */
.profile-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .profile-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; } }
.about { font-size: clamp(1.25rem, .9vw + 1rem, 1.5625rem); line-height: 1.6; }
.titleblock { background: var(--paper); border: 2px solid var(--text); border-radius: 2px; box-shadow: 8px 8px 0 0 var(--line-strong); position: relative; }
[dir="rtl"] .titleblock { box-shadow: -8px 8px 0 0 var(--line-strong); }
.tb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 2px solid var(--text); font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
html[lang="ar"] .tb-head > span:first-child { font-family: var(--font); text-transform: none; letter-spacing: normal; font-size: .9375rem; }
.tb-rev { color: var(--text-3); white-space: nowrap; direction: ltr; }
.tb-grid > div { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
@media (min-width: 720px) { .tb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-grid > div:nth-child(odd):not(.wide) { border-inline-end: 1px solid var(--line); } .tb-grid > .wide { grid-column: 1 / -1; } }
.tb-grid > div:last-child { border-bottom: 0; padding-bottom: 40px; }
.tb-grid dt { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
html[lang="ar"] .tb-grid dt { font-family: var(--font); text-transform: none; letter-spacing: normal; font-size: max(var(--min14), .8125rem); }
.tb-grid dd { margin-top: 4px; font-weight: 600; }
.tb-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.tb-roles li { padding: 3px 10px; background: var(--highlight); font-weight: 600; font-size: .9375rem; border-radius: 2px; }
.titleblock .stamp { position: absolute; inset-inline-end: 18px; bottom: -16px; background: var(--paper); }
/* Projects: wall map + index-card drawer */
.projects-top { display: grid; gap: 28px; margin-bottom: 48px; }
@media (min-width: 1024px) { .projects-top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 40px; } }
.pinned { position: relative; padding: 14px 14px 10px; }
.pushpin { position: absolute; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F08A80, var(--red) 55%, #6E1610); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3); }
.pushpin.p1 { left: 18px; } .pushpin.p2 { right: 18px; }
.map-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 4px 8px; border-bottom: 1px solid var(--line); font-family: var(--type); font-size: max(var(--min14), .6875rem); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.map-head b { color: var(--text); }
html[lang="ar"] .map-head { font-family: var(--font); letter-spacing: normal; text-transform: none; font-size: max(var(--min14), .8125rem); }
.ksa-map { width: 100%; height: auto; margin-top: 6px; direction: ltr; }
.ksa-map .grat { stroke: var(--line-strong); stroke-width: .5; stroke-dasharray: 2 3; fill: none; opacity: .7; }
.ksa-map .grat-l { font-family: var(--type); font-size: 7px; fill: var(--text-3); }
.ksa-map .land { fill: var(--map-land); }
.ksa-map .hatch { fill: url(#ksa-hatch); }
.ksa-map .hatch-line { stroke: var(--map-hatch); stroke-width: 1; }
.ksa-map .coast { fill: none; stroke: var(--text); stroke-width: 1.3; stroke-linejoin: round; }
.ksa-map .north path { fill: var(--text); }
.ksa-map .north text { font-family: var(--type); font-size: 8px; font-weight: 700; fill: var(--text); }
.pin .shadow { fill: rgba(0, 0, 0, 0.25); }
.pin .head { fill: var(--red); stroke: var(--paper); stroke-width: 1.2; }
.pin.is-base .head { fill: var(--text); }
.pin.is-now .head { fill: var(--ok); }
.pin .ring { fill: none; stroke: var(--red); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin-label { font-size: 8.5px; font-weight: 600; fill: var(--text); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.pin-label.ar { display: none; font-size: 9.5px; }
html[lang="ar"] .pin-label.en { display: none; }
html[lang="ar"] .pin-label.ar { display: inline; }
.pin.hot .ring { opacity: .8; }
@media (max-width: 1100px) { .pin-label { font-size: 10.5px; } .pin-label.ar { font-size: 11px; } }
@media (max-width: 639px) { .pin-label { display: none; } html[lang="ar"] .pin-label.ar { display: none; } .ksa-map .grat-l { display: none; } }
@media (prefers-reduced-motion: no-preference) {
.js .ksa-map .coast { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ksa-map.in .coast { animation: draw 2.4s var(--ease) forwards; }
.js .ksa-map .pin { opacity: 0; }
.js .ksa-map.in .pin { animation: drop .45s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(1.1s + var(--i) * 110ms); }
/* Pin rings: two pulses when the map first appears, then only on legend hover (no idle animation) */
.js .ksa-map.in .pin .ring { animation: ring 2.8s ease-out 2; animation-delay: calc(1.6s + var(--i) * 280ms); }
.js .ksa-map.in .pin.hot .ring, .pin.hot .ring { animation: ring 1.4s ease-out infinite; animation-delay: 0s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
}
.pin:nth-of-type(1) { --i: 0; } .pin:nth-of-type(2) { --i: 1; } .pin:nth-of-type(3) { --i: 2; } .pin:nth-of-type(4) { --i: 3; } .pin:nth-of-type(5) { --i: 4; } .pin:nth-of-type(6) { --i: 5; } .pin:nth-of-type(7) { --i: 6; } .pin:nth-of-type(8) { --i: 7; } .pin:nth-of-type(9) { --i: 8; }
.map-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 8px 0 4px; border-top: 1px dashed var(--line); margin-top: 6px; }
@media (min-width: 640px) { .map-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.map-legend a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border-radius: 4px; text-decoration: none; font-size: max(var(--min14), .8125rem); font-weight: 600; color: var(--text-2); line-height: 1.3; }
.map-legend a:hover, .map-legend a:focus-visible { background: var(--highlight); color: var(--text); }
@media (min-width: 1024px) { .map-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; } }
.ksa-map .pin { cursor: pointer; }
.ksa-map .pin .hit { fill: transparent; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.lg-dot.is-base { background: var(--text); }
.lg-dot.is-now { background: var(--ok); }
.drawer-art { position: relative; }
.drawer-art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; text-decoration: none; font-family: var(--type); font-size: max(var(--min14), .8125rem); font-weight: 700; letter-spacing: .06em; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px; box-shadow: 0 2px 0 0 var(--line); transition: transform .2s var(--ease), border-color .2s ease; }
html[lang="ar"] .chip { font-family: var(--font); font-size: .9375rem; letter-spacing: normal; }
.chip:hover { transform: translateY(-2px); border-color: var(--red); }
/* The drawer front */
.drawer-front {
display: flex; align-items: center; justify-content: center; gap: 28px; padding: 18px; margin-bottom: 28px; border-radius: 6px;
background: linear-gradient(180deg, #8A6A43, #6E5233); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.25), var(--shadow);
}
:root[data-active-theme="dark"] .drawer-front { background: linear-gradient(180deg, #4A3924, #3A2C1B); }
.drawer-label { min-width: 200px; padding: 6px 16px; text-align: center; background: #F7F0DC; color: #1B2A41; border: 3px solid #C9A65A; border-radius: 3px; font-family: var(--type); font-weight: 700; font-size: max(var(--min14), .8125rem); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
html[lang="ar"] .drawer-label { font-family: var(--font); letter-spacing: normal; text-transform: none; font-size: .9375rem; }
.drawer-handle { width: 90px; height: 14px; border-radius: 0 0 40px 40px; background: linear-gradient(180deg, #E2C47A, #A9853C); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35); }
@media (max-width: 479px) { .drawer-handle { display: none; } }
.cards-wrap { position: relative; }
.cards { position: relative; display: grid; gap: 40px; }
.rail, .rail-fill { position: absolute; top: 12px; bottom: 12px; inset-inline-start: 13px; width: 3px; border-radius: 3px; }
.rail { background: linear-gradient(90deg, #8F96A0, #D7DBE0, #8F96A0); opacity: .6; }
.rail-fill { background: var(--red); transform-origin: top; opacity: .85; will-change: transform; }
.employer { position: relative; padding-inline-start: 46px; }
.employer::before { content: ""; position: absolute; inset-inline-start: 4px; top: 10px; z-index: 1; width: 21px; height: 21px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line-strong); transition: border-color .4s ease; }
.employer.passed::before, .no-js .employer::before { border-color: var(--red); }
.employer.is-current::before { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 25%, transparent); }
.divider { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 8px 18px 10px; margin-bottom: 16px; background: var(--paper-2); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -2px 6px -4px var(--tab-shadow); }
.divider h3 { font-size: clamp(1.125rem, .7vw + 1rem, 1.375rem); }
.tenure { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 600; letter-spacing: .06em; color: var(--text-3); }
html[lang="ar"] .tenure { font-family: var(--font); font-size: .875rem; letter-spacing: normal; }
.emp-projects { display: grid; gap: 16px; }
@media (min-width: 760px) { .emp-projects.many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.index-card {
position: relative; padding: 0 22px 20px; scroll-margin-top: calc(var(--header-h) + 60px);
background: var(--paper);
border-radius: 3px; box-shadow: var(--shadow-sm); border: 1px solid var(--line);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.index-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.index-card:target, .index-card:focus { outline: none; box-shadow: 0 0 0 3px var(--red), var(--shadow); }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 52px; padding-top: 12px; border-bottom: 2px solid var(--card-red); margin-bottom: 10px; font-size: .875rem; color: var(--text-3); }
.p-dates { font-family: var(--type); font-weight: 700; color: var(--red); font-size: max(var(--min14), .8125rem); letter-spacing: .02em; }
html[lang="ar"] .p-dates { font-family: var(--font); font-size: .9375rem; letter-spacing: normal; }
.p-place { display: inline-flex; align-items: center; gap: 4px; }
.p-place .icon { width: 16px; height: 16px; }
.badge-current { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 2px 8px; border: 2px solid var(--ok); color: var(--ok); border-radius: 3px; transform: rotate(-3deg); }
html[lang="ar"] .badge-current { font-family: var(--font); letter-spacing: normal; font-size: max(var(--min14), .8125rem); }
.index-card h4 { font-size: 1.125rem; line-height: 1.4; }
.p-role { margin-top: 2px; font-weight: 600; color: var(--text-2); font-size: .96875rem; }
.p-work { margin-top: 8px; color: var(--text-2); font-size: .96875rem; }
.mini-label { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
html[lang="ar"] .mini-label { font-family: var(--font); text-transform: none; letter-spacing: normal; font-size: max(var(--min14), .8125rem); }
.p-packages { margin-top: 12px; }
.p-packages ul { margin-top: 4px; display: grid; gap: 2px; font-size: .9375rem; color: var(--text-2); }
.p-packages li { position: relative; padding-inline-start: 16px; }
.p-packages li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 7px; height: 2px; background: var(--red); }
.parties { margin-top: 12px; display: grid; gap: 4px; font-size: .9375rem; }
.parties > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; }
.parties dt { color: var(--text-3); font-weight: 600; font-size: max(var(--min14), .8125rem); padding-top: 2px; }
.parties dd { color: var(--text-2); min-width: 0; }
.chips-sm { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.index-card { display: flex; flex-direction: column; }
.index-card .chips-sm { margin-top: auto; padding-top: 14px; }
.chips-sm li { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; padding: 3px 9px; border-radius: 2px; background: var(--highlight); color: var(--text); }
@media (max-width: 479px) {
.parties > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.employer { padding-inline-start: 38px; }
.index-card { padding: 0 16px 18px; }
.cards { gap: 32px; }
}
/* Platforms: labelled ring binders */
.binders { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .binders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .binders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.binder {
--c: var(--binder-1); position: relative; padding: 22px 20px 22px 50px; border-radius: 6px 10px 10px 6px;
background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0 34px, var(--c) 34px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset -2px -3px 0 rgba(0, 0, 0, 0.2), var(--shadow);
transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
[dir="rtl"] .binder { padding: 22px 50px 22px 20px; border-radius: 10px 6px 6px 10px; background: linear-gradient(270deg, color-mix(in srgb, var(--c) 70%, #000) 0 34px, var(--c) 34px); }
.binder:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.binder:nth-child(2) { --c: var(--binder-2); } .binder:nth-child(3) { --c: var(--binder-3); } .binder:nth-child(4) { --c: var(--binder-4); } .binder:nth-child(5) { --c: var(--binder-5); } .binder:nth-child(6) { --c: var(--binder-6); }
.binder .rings { position: absolute; inset-inline-start: 9px; top: 22px; bottom: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.binder .rings i { display: block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #F4F4F4, #9AA0A8 60%, #5E636B); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.binder-label { position: relative; height: 100%; padding: 14px 16px 16px; background: var(--slip-bg, #FBF7EC); color: #1B2A41; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.3); }
.binder-label .mark { width: 40px; height: 40px; color: #1B2A41; }
.binder-label .mark svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.binder-label h3 { margin-top: 10px; font-size: 1.0625rem; line-height: 1.35; color: #1B2A41; }
.binder-label .p-role-txt { margin-top: 2px; color: #36405A; font-size: .9375rem; }
.binder-label .used { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #C9B998; font-size: .875rem; color: #4C505E; }
.binder-label .used b { color: #36405A; font-weight: 600; }
.binder .stamp { position: absolute; top: 12px; inset-inline-end: 12px; font-size: max(var(--min14), .6875rem); color: #A3261C; mix-blend-mode: multiply; padding: 4px 8px; }
html[lang="ar"] .binder .stamp { font-size: max(var(--min14), .8125rem); }
/* Expertise: clipped forms */
.forms { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .forms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-sheet { padding: 26px 24px 24px; }
.form-no { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--type); font-size: max(var(--min14), .6875rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.form-no .icon { width: 22px; height: 22px; color: var(--red); }
.form-sheet h3 { margin-top: 14px; font-size: 1.125rem; }
.form-sheet p { margin-top: 8px; color: var(--text-2); font-size: .96875rem; }
.form-sheet .check { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; color: var(--ok); letter-spacing: .1em; text-transform: uppercase; }
.form-sheet .check .box { width: 16px; height: 16px; border: 1.5px solid currentColor; display: grid; place-items: center; }
.form-sheet .check .icon { width: 14px; height: 14px; }
html[lang="ar"] .form-sheet .check { font-family: var(--font); letter-spacing: normal; font-size: .875rem; }
/* Certifications: stamped documents */
.cert-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.certificate { position: relative; padding: 30px 28px 28px; background: var(--paper); border-radius: 2px; box-shadow: var(--shadow); }
.certificate::before { content: ""; position: absolute; inset: 8px; border: 2px solid color-mix(in srgb, var(--amber) 70%, transparent); outline: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); outline-offset: 3px; pointer-events: none; }
.certificate h3 { font-size: 1.0625rem; display: flex; align-items: center; gap: 12px; }
.seal { width: 46px; height: 46px; flex: none; color: var(--amber-ink); }
.seal svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cert-list { margin-top: 16px; display: grid; gap: 10px; }
.cert-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-weight: 600; }
.cert-list .icon { color: var(--ok); }
.cert-list .date { font-family: var(--type); font-weight: 500; color: var(--text-3); font-size: max(var(--min14), .8125rem); }
html[lang="ar"] .cert-list .date { font-family: var(--font); }
.certificate .stamp { position: absolute; bottom: 18px; inset-inline-end: 22px; font-size: max(var(--min14), .75rem); opacity: 1; }
@media (max-width: 559px) { .certificate:not(.cert-total) .stamp { position: static; display: block; width: fit-content; margin: 16px 0 0; margin-inline-start: auto; } }
.cert-total { background: var(--desk); color: var(--desk-fg); }
.cert-total::before { border-color: rgba(235, 168, 62, 0.45); outline-color: rgba(235, 168, 62, 0.25); }
.cert-total .big { font-size: 4.5rem; font-weight: 700; line-height: .9; color: var(--amber); direction: ltr; }
[dir="rtl"] .cert-total .big { text-align: end; }
.cert-total p { margin-top: 10px; color: var(--desk-2); }
.cert-total .btn { margin-top: 18px; color: var(--desk-fg); border-color: rgba(243, 234, 215, .4); background: transparent; box-shadow: none; }
.cert-total .btn:hover { border-color: var(--desk-fg); }
.cert-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.edu-row { margin-top: 12px; }
.edu-row .school { font-weight: 600; font-size: 1.0625rem; }
.edu-row .lvl { color: var(--text-2); }
/* Contact: transmittal slip on the desk blotter */
.folder.desk { background-color: var(--desk); color: var(--desk-fg); }
.folder.desk .folder-tab { color: var(--desk-fg); }
.folder.desk .folder-tab .label-paper { color: #1B2A41; background: #FBF7EC; }
.folder.desk .section-head h2 { color: var(--desk-fg); }
.folder.desk .hl { background: linear-gradient(transparent 84%, var(--amber) 84%, var(--amber) 94%, transparent 94%); }
.contact-text { max-width: 60ch; font-size: 1.1875rem; color: var(--desk-2); }
.slip { margin-top: 36px; max-width: 860px; background: var(--slip-bg, #FBF7EC); color: #1B2A41; padding: 26px 24px 30px; border-radius: 2px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); position: relative; }
.slip-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 3px double #1B2A41; font-family: var(--type); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: 1rem; }
html[lang="ar"] .slip-title { font-family: var(--font); letter-spacing: normal; }
.slip-fields { margin-top: 6px; }
.slip-fields > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid #DCCFB2; }
@media (max-width: 479px) { .slip-fields > div { grid-template-columns: minmax(0, 1fr); } }
.slip-fields dt { font-family: var(--type); font-size: max(var(--min14), .75rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4C505E; padding-top: 4px; }
html[lang="ar"] .slip-fields dt { font-family: var(--font); letter-spacing: normal; text-transform: none; font-size: .875rem; }
.slip-fields dd { font-weight: 600; min-width: 0; }
.slip-fields a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #1B2A41; text-decoration: underline; text-decoration-color: #C9B998; text-underline-offset: 4px; overflow-wrap: anywhere; }
.slip-fields a:hover { text-decoration-color: #A3261C; }
.slip-fields .icon { color: #A3261C; }
.slip .cta-row { margin-top: 22px; }
.slip .btn-primary { background: #1B2A41; color: #FBF7EC; box-shadow: 0 3px 0 0 #0B1220; }
.slip .btn-ghost { background: #FBF7EC; color: #1B2A41; border-color: #AE9B78; box-shadow: 0 2px 0 0 #D6C6A6; }
.slip .stamp { position: absolute; bottom: 34px; inset-inline-end: 26px; color: #1D5A3E; font-size: max(var(--min14), .8125rem); }
@media (max-width: 759px) { .slip .stamp { position: static; margin-top: 18px; } }
/* Footer: title block */
.site-footer { background-color: var(--desk); background-image: var(--edge-shade); color: var(--desk-2); font-size: .875rem; padding-bottom: 24px; }
@media (max-width: 759px) { .footer-grid > *:last-child { grid-column: 1 / -1; border-inline-end: 0; } }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--desk-line); }
.footer-grid > * { padding: 12px 16px; border-inline-end: 1px solid var(--desk-line); border-bottom: 1px solid var(--desk-line); min-width: 0; }
.footer-grid > *:nth-child(2n) { border-inline-end: 0; }
@media (min-width: 900px) {
.footer-grid { grid-template-columns: 1.2fr 1.5fr 1fr .8fr auto; }
.footer-grid > * { border-bottom: 0; border-inline-end: 1px solid var(--desk-line); }
.footer-grid > *:nth-child(2n) { border-inline-end: 1px solid var(--desk-line); }
.footer-grid > *:last-child { border-inline-end: 0; }
}
.footer-grid small { display: block; font-family: var(--type); font-size: max(var(--min14), .75rem); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2px; opacity: .85; }
html[lang="ar"] .footer-grid small { font-family: var(--font); letter-spacing: normal; font-size: max(var(--min14), .75rem); text-transform: none; }
.footer-grid b { color: var(--desk-fg); font-weight: 600; }
.site-footer a { color: var(--desk-fg); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.site-footer a:hover { text-decoration: underline; }
/* Arabic: never track connected script */
html[lang="ar"] body, html[lang="ar"] * { letter-spacing: normal !important; }
/* ---------- Scroll reveal (JS + motion OK only) ---------- */
@media (prefers-reduced-motion: no-preference) {
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 80ms; } .js .reveal.d2 { transition-delay: 160ms; } .js .reveal.d3 { transition-delay: 240ms; }
}
@media print {
.site-header, .skip, .cta-row, .props, .hero-scene { display: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* Delay steps (no inline styles, so a strict CSP works) */
.d1 { --d: 1; } .d2 { --d: 2; } .d3 { --d: 3; } .d4 { --d: 4; } .d5 { --d: 5; } .d6 { --d: 6; }
/* Brand mark */
.bm-bg { fill: var(--text); } .bm-back { fill: var(--amber); } .bm-doc { fill: var(--paper); } .bm-front { fill: color-mix(in srgb, var(--amber) 80%, #fff); } .bm-line { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
/* ---------- Hand-made desk illustration (day / night via tokens) ---------- */
.ill, .props {
--wall: #E9DCC0; --wall-2: #DCCBA8; --frame: #8A6A43; --sky: #CFE3EA; --sky-2: #EEF4F2; --moon-o: 0;
--wood: #B9895A; --wood-2: #8E623B; --wood-3: #A87A4D; --metal: #A3AAB3; --metal-2: #858C96; --metal-3: #6C727C;
--beige: #E7DCC3; --beige-2: #CDBF9F; --beige-3: #B3A47F; --screen: #1F2B23; --phos: #8EE6A8;
--manila: #E8CC8F; --manila-2: #D2AE63; --ill-red: #B42318; --ill-navy: #23395B; --ill-green: #2F5D50; --ill-amber: #D69A2D;
--ill-paper: #FBF7EC; --bp: #2B5C9E; --bp-line: #D4E4F7; --ill-shadow: rgba(60, 40, 10, 0.18); --glow: #FFE2A1; --glow-o: .25; --screen-o: 0;
--note: #F2D16B; --note-2: #D9B444; --stain: rgba(120, 72, 22, 0.22); --bp-sheet: rgba(43, 92, 158, 0.07); --bp-grid: rgba(43, 92, 158, 0.16); --bp-coast: rgba(27, 42, 65, 0.55);
}
.ill { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 2px; }
:root[data-active-theme="dark"] :is(.ill, .props) {
--wall: #221C14; --wall-2: #1B160F; --frame: #4A3924; --sky: #0E1729; --sky-2: #1B2B47; --moon-o: 1;
--wood: #5E4329; --wood-2: #3E2C1A; --wood-3: #4E3720; --metal: #4F5660; --metal-2: #3F454E; --metal-3: #30353C;
--beige: #9C9179; --beige-2: #7D7360; --beige-3: #645B4A; --screen: #0C1610; --phos: #74FFA6;
--manila: #9C8456; --manila-2: #7E6A43; --ill-paper: #D8CFB8; --bp: #1F4377; --bp-line: #8FB0D8;
--ill-shadow: rgba(0, 0, 0, 0.45); --glow: #FFC970; --glow-o: .85; --screen-o: .5;
--note: #B89B45; --note-2: #9A8036; --stain: rgba(255, 210, 150, 0.12); --bp-sheet: rgba(120, 160, 230, 0.06); --bp-grid: rgba(140, 170, 230, 0.12); --bp-coast: rgba(243, 234, 215, 0.45);
}
:is(.ill, .props) .wall { fill: var(--wall); } :is(.ill, .props) .wall-2 { fill: var(--wall-2); } :is(.ill, .props) .frame { fill: var(--frame); }
:is(.ill, .props) .sky { fill: var(--sky); } :is(.ill, .props) .sky-2 { fill: var(--sky-2); } :is(.ill, .props) .moon { fill: #F3E9C9; opacity: var(--moon-o); }
:is(.ill, .props) .wood { fill: var(--wood); } :is(.ill, .props) .wood-2 { fill: var(--wood-2); } :is(.ill, .props) .wood-3 { fill: var(--wood-3); }
:is(.ill, .props) .metal { fill: var(--metal); } :is(.ill, .props) .metal-2 { fill: var(--metal-2); } :is(.ill, .props) .metal-3 { fill: var(--metal-3); }
:is(.ill, .props) .beige { fill: var(--beige); } :is(.ill, .props) .beige-2 { fill: var(--beige-2); } :is(.ill, .props) .beige-3 { fill: var(--beige-3); }
:is(.ill, .props) .screen { fill: var(--screen); } :is(.ill, .props) .phos { stroke: var(--phos); stroke-width: 3; stroke-linecap: round; }
:is(.ill, .props) .manila { fill: var(--manila); } :is(.ill, .props) .manila-2 { fill: var(--manila-2); }
:is(.ill, .props) .red { fill: var(--ill-red); } :is(.ill, .props) .navy { fill: var(--ill-navy); } :is(.ill, .props) .green { fill: var(--ill-green); } :is(.ill, .props) .amber { fill: var(--ill-amber); }
:is(.ill, .props) .paper { fill: var(--ill-paper); } :is(.ill, .props) .bp { fill: var(--bp); } :is(.ill, .props) .bp-line { stroke: var(--bp-line); stroke-width: 1.2; fill: none; }
:is(.ill, .props) .ink-line { stroke: var(--ill-navy); stroke-width: 1.4; stroke-linecap: round; opacity: .55; }
:is(.ill, .props) .stamp-mark { fill: none; stroke: var(--ill-red); stroke-width: 2.2; opacity: .8; }
:is(.ill, .props) .shadow { fill: var(--ill-shadow); }
:is(.ill, .props) .label { fill: var(--ill-paper); }
:is(.ill, .props) .glow-stop { stop-color: var(--glow); }
:is(.ill, .props) .glow { opacity: var(--glow-o); }
:is(.ill, .props) .screen-glow { opacity: var(--screen-o); }
:is(.ill, .props) .clip-wire { fill: none; stroke: #9AA1AA; stroke-width: 1.6; stroke-linecap: round; }
:is(.ill, .props) .phos-fill { fill: var(--phos); }
:is(.ill, .props) .arm { fill: none; stroke: var(--metal-3); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Contact: words on the left, the slip on the right */
@media (min-width: 1024px) {
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.contact-grid .slip { margin-top: 0; }
}
/* Desk props (SVG text stays left-to-right inside an Arabic page) */
:is(.ill, .props) text { direction: ltr; }
:is(.ill, .props) .ink-hand { fill: none; stroke: var(--ill-navy); stroke-width: 2.4; stroke-linecap: round; }
.props .note { fill: var(--note); } .props .note-fold { fill: var(--note-2); }
.props .note-t { font-family: var(--type); font-weight: 800; font-size: 17px; fill: #1B2A41; }
.props .note-line { fill: none; stroke: var(--ill-red); stroke-width: 2; stroke-linecap: round; }
.props .slip-t { font-family: var(--type); font-weight: 800; font-size: 13px; letter-spacing: .2em; fill: var(--ill-navy); }
.props .rule-red { stroke: var(--ill-red); stroke-width: 2; }
.props .box { fill: none; stroke: var(--ill-navy); stroke-width: 1.4; opacity: .7; }
.props .tick { fill: none; stroke: var(--ill-green); stroke-width: 2; stroke-linecap: round; }
.props .stain { fill: none; stroke: var(--stain); stroke-width: 7; }
.props .stain.thin { stroke-width: 3; }
.props .bp-sheet { fill: var(--bp-sheet); }
.props .bp-grid { fill: none; stroke: var(--bp-grid); stroke-width: 1; }
.props .bp-coast { fill: none; stroke: var(--bp-coast); stroke-width: 2; stroke-dasharray: 6 4; }
.props .bp-end { fill: color-mix(in srgb, var(--bp) 70%, #000); }
/* The text row spans the wrap; let pointer events through to the desk bot except on the text itself */
.hero-wrap { pointer-events: none; }
.board, .calendars { pointer-events: auto; }
/* Desk bot: a little computer-headed helper at the desk, coding at the CRT with its back to us.
It lives in its own overlay