/* A recruiter printing the page should get a clean document. Loaded with media="print", so nothing here needs an @media wrapper. The palette is deliberately not the screen one: paper wants plain black on white. The hex values live in css/tokens.css as --print-* tokens, because hex literals belong only there. */ :root, [data-theme="dark"] { /* data-theme stays on while printing, so pin the UA to light here or a dark-mode reader prints with dark form controls. */ color-scheme: light; --ground: var(--print-ground); /* The wash is a screen effect. Most printers drop background images, but "most" is not a design decision, so both the image and the tint token it is built from collapse to paper white here. */ --ground-tint: var(--print-ground); --ground-wash: none; --ground-raised: var(--print-ground); --ink: var(--print-ink); --ink-muted: var(--print-ink-muted); /* Every accent decision on the page is a text colour, and print maps the accent to --print-ink, so the Arabic name, headings, pills, dates and skill labels all print as the same black as the prose. The blue is a screen treatment and stays one. */ --accent: var(--print-accent); --accent-strong: var(--print-accent); --rule: var(--print-rule); --rule-accent: var(--print-rule); --accent-plate: var(--print-ground); --portrait-ring: var(--print-portrait-ring); } body { font-size: 10.5pt; line-height: 1.4; } /* .noscript-warning is deliberately NOT hidden: it only exists in the document at all when scripting is off, and in that case it is the entire page. */ .site-nav-wrap, .nav-actions, .nav-menu-toggle, .skip-link, .work-tags { display: none !important; } /* .entry-more carries two kinds of link: an internal jump to a section further down the same sheet, and outbound links worth the ink — an App Store listing, a website, the Khalifa University honours list the spec calls the page's one piece of independent evidence. Hide only the internal jump. */ .entry-more:has(a[href^="#"]) { display: none !important; } main { max-width: none; padding: 0; } .section { padding-block: 0.6cm; break-inside: avoid; } .section + .section { border-top: 1px solid var(--rule); } .hero { padding-block: 0 0.6cm; } /* Both axes: sections.css sets height: 11rem, and a definite height beats aspect-ratio, so setting width alone printed a 98x176 oval with a quarter of the frame cropped away. */ .hero-portrait { width: 2.6cm; height: 2.6cm; } /* The rail is one abspos pseudo-element on the whole timeline, so a page break leaves its fragment painting to the physical page bottom — an inch of bare hairline in the blank feet of later pages. Without the rail the badge circle is just an indent, so it flattens to a plain date. */ .timeline::before { display: none; } .year-group { break-inside: avoid; padding-block: 0.35cm; } .year-label { width: auto; height: auto; border: 0; border-radius: 0; background: none; margin: 0 0 0.2cm; font-size: 11pt; } .entry { break-inside: avoid; grid-template-columns: auto 1fr; gap: 0.4cm; } .entry-badge { width: auto; height: auto; border: 0; border-radius: 0; background: none; } .entries { gap: 0.35cm; } /* Photographs are dropped in print; only the portrait survives. Organisation marks go with them: they are decorative, the organisation's name is already set as text beside them, and a dark-ink mark prints as a smudge that costs toner and buys nothing. */ .gallery, .entry-logo { display: none !important; } .work + .work { margin-top: 0.5cm; padding-top: 0.5cm; } /* A .work article can run longer than a page, so forcing it whole would trade a mid-paragraph split for a large blank gap before it. Target the breaks that actually read badly instead: a stranded heading, a torn link row, a single orphaned line. */ .work-title, .work-meta { break-after: avoid; } .work-links { break-inside: avoid; } .work p, .block-text { orphans: 3; widows: 3; } /* Both are short, self-contained units, so forcing them whole never risks the blank-gap trade-off that ruled it out for .work. */ .block-callout, .benchmark { break-inside: avoid; } /* Print the destination of every link, since paper cannot be clicked. The surviving .entry-more links are external by definition. */ .hero-links a::after, .work-links a::after, .entry-more a::after, .contact-row a::after { content: " (" attr(href) ")"; font-size: 8pt; color: var(--ink-muted); word-break: break-all; } .hero-links a[href^="mailto:"]::after, .contact-row a[href^="mailto:"]::after { content: ""; } @page { margin: 1.4cm; }