/* nadimelgarhy.com (Nov 3 2026, v3: back to 12 columns; Bricolage Grotesque + Space Mono; portrait hero.
   v1 = Inter Tight 12 col, v2 = Geist 8 col: index-v1/-v2.html + site-v1/-v2.css). The Algorithme du Temps system on its own black: one 12-column grid, Inter Tight for text
   and titles, Xanh Mono for figures and labels, five sizes on a fixed scale, flush-left ragged-right, hairline rules.
   Shares its stylesheet base with the Bureau Privé site (businesses/bpee/output/site/assets/site.css). */
:root{
  color-scheme:dark;
  --paper:#05070e; --white:#0b0d14; --ink:#ececec; --grey:#8f8f8f; --hair:rgba(255,255,255,.14); --rule:#cfcfcf;
  --sun:#e7b088; --ember:#b24d28; --hi:var(--sun);
  --f-body:"Newsreader",Georgia,serif; --f-mono:"DM Mono",ui-monospace,monospace;
  --m:clamp(20px,4.44vw,96px); --g:clamp(14px,1.67vw,32px); --bar:52px;
  --sp:clamp(96px,12.5vw,240px); --rg:clamp(40px,4.44vw,80px); --open:clamp(44px,5.56vw,104px);
  --t-s:12px; --t-b:clamp(15px,1.11vw,18px); --t-l:clamp(20px,1.94vw,34px); --t-h:clamp(32px,4.17vw,80px); --t-d:clamp(44px,8.6vw,170px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-b)/1.45 var(--f-body);letter-spacing:.003em;
  font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}

/* grid */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding-left:var(--m);padding-right:var(--m)}
.g>*{grid-column:1/-1;min-width:0}
@media (min-width:761px){
  .c1-3{grid-column:1/4}.c1-4{grid-column:1/5}.c1-5{grid-column:1/6}.c1-6{grid-column:1/7}.c1-7{grid-column:1/8}.c1-8{grid-column:1/9}
  .c4-12{grid-column:4/13}.c5-12{grid-column:5/13}.c6-12{grid-column:6/13}.c7-12{grid-column:7/13}.c8-12{grid-column:8/13}.c9-12{grid-column:9/13}
  .c4-8{grid-column:4/9}.c5-9{grid-column:5/10}.c7-11{grid-column:7/12}.c2-6{grid-column:2/7}
}

/* type: five sizes */
.display{font-weight:500;font-size:var(--t-d);line-height:.92;letter-spacing:-.045em;margin-left:-.04em}
.display span{display:block}
.display .v2{color:var(--grey)}
.h{font-weight:500;font-size:var(--t-h);line-height:1.04;letter-spacing:-.03em}
.lead{font-weight:400;font-size:var(--t-l);line-height:1.2;letter-spacing:-.015em}
.mono,.lab,.n,dt,figcaption,.idx td.k,.bar .nav{font-family:var(--f-mono)}
.lab,figcaption,dt,.small{font-size:var(--t-s);line-height:1.34;letter-spacing:.01em}
.lab,figcaption,dt{color:var(--grey)}
.lab b{color:var(--ink);font-weight:400}
p+p{margin-top:.9em}
.measure{max-width:30em}

/* bar */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;height:var(--bar);align-items:center;background:rgba(5,7,14,.94);
  border-bottom:1px solid var(--rule);font-size:var(--t-s);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;grid-column:1/7;white-space:nowrap}
.brand svg.mk{width:44px;height:auto}
.brand .eye{width:26px;height:14px;color:var(--ink)}
.nav{grid-column:7/13;display:flex;justify-content:flex-end;gap:0 clamp(12px,1.4vw,26px);flex-wrap:wrap;font-size:13px}
.nav a:hover{color:var(--hi);text-decoration:none}
main{padding-top:var(--bar)}

/* sections */
section{border-top:1px solid var(--rule);padding-top:var(--open);padding-bottom:var(--sp)}
section.first{border-top:0}
.head{row-gap:18px;margin-bottom:var(--rg)}
.head .lab{grid-column:1/4}
.head .h{grid-column:4/13;max-width:16em}
.white{background:var(--white)}
.ink{background:var(--ink);color:var(--paper);--rule:var(--paper);--grey:#9a9891}
.ink a:hover{color:var(--hi)}

/* hero */
.hero{padding-top:clamp(40px,5vw,96px);padding-bottom:0;row-gap:var(--rg)}
.hero .kick{grid-column:1/-1}
.hero .lead{grid-column:1/-1}
@media (min-width:761px){.hero .lead{grid-column:7/12}.hero .kick{grid-column:1/6}}
.hero figure{grid-column:1/-1;margin-top:calc(var(--rg) * .5)}
.plate{position:relative;overflow:hidden;background:#000}
.plate img{width:100%;height:100%;object-fit:cover}
.r169{aspect-ratio:16/9}.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}
figcaption{margin-top:10px;max-width:40em}

/* programmes */
.prog{row-gap:24px;padding-top:var(--rg);border-top:1px solid var(--hair)}
.prog+.prog{margin-top:var(--rg)}
.prog .n{font-size:var(--t-h);line-height:1;letter-spacing:-.02em;color:var(--hi)}
.prog .q{max-width:18em}
.prog .body{display:flex;flex-direction:column;gap:22px}
.status{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px;border-top:1px solid var(--hair);padding-top:12px;max-width:30em}
.status dd{font-size:var(--t-s);line-height:1.34}
.status dd a{border-bottom:1px solid currentColor}
.status dd a:hover{text-decoration:none;color:var(--hi)}
@media (min-width:761px){
  .prog .n{grid-column:1/3}
  .prog .body{grid-column:3/8}
  .prog figure{grid-column:8/13}
  .prog.alt .body{grid-column:7/12;grid-row:1}
  .prog.alt figure{grid-column:1/6;grid-row:1}
  .prog.alt .n{grid-column:12/13;grid-row:1;text-align:right}
}

/* index of works */
.idx{width:100%;border-collapse:collapse;font-size:var(--t-b)}
.idx th{font:400 var(--t-s)/1.34 var(--f-mono);color:var(--grey);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--rule)}
.idx td{padding:16px 12px 16px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.idx td.k{font-size:var(--t-s);color:var(--grey);white-space:nowrap;padding-top:20px}
.idx td.t{font-weight:500;letter-spacing:-.01em;max-width:28em}
.idx td.t small{display:block;font-weight:400;color:var(--grey);font-size:var(--t-s);margin-top:4px;letter-spacing:.01em}
.idx td.go a{white-space:nowrap;color:var(--hi)}
.idx tr:hover td{background:rgba(255,255,255,.03)}
@media (max-width:760px){
  .idx thead{display:none}
  .idx tr{display:grid;grid-template-columns:3em 1fr;border-bottom:1px solid var(--hair);padding:14px 0}
  .idx td{border:0;padding:2px 0}
  .idx td.k{grid-row:1/4;padding-top:4px}
  .idx td.p,.idx td.f,.idx td.y{font-size:var(--t-s);color:var(--grey);display:inline}
}

/* method */
.tenets{row-gap:var(--rg)}
.tenet{border-top:1px solid var(--hair);padding-top:16px;display:flex;flex-direction:column;gap:12px}
.tenet .n{font-size:var(--t-s);color:var(--grey)}
.tenet h3{font-size:var(--t-l);font-weight:400;letter-spacing:-.015em;line-height:1.2}
@media (min-width:761px){.tenet{grid-column:span 4}}

/* bureau */
.about{row-gap:var(--rg)}
.about .txt{display:flex;flex-direction:column;gap:22px}
.about dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;border-top:1px solid var(--hair);padding-top:14px}
.about dd{font-size:var(--t-s);line-height:1.34}
.about dd a{border-bottom:1px solid currentColor}

/* correspondence */
.corr{row-gap:var(--rg)}
.corr .addr{font-size:var(--t-h);font-weight:500;letter-spacing:-.03em;line-height:1.04;word-break:break-word}
.corr .addr a{border-bottom:2px solid var(--hi)}
.corr .addr a:hover{text-decoration:none;color:var(--hi)}
.corr ul li{border-top:1px solid rgba(244,243,239,.2);padding:12px 0;display:grid;grid-template-columns:3em 1fr;gap:0 12px}
.corr ul li span{font-family:var(--f-mono);font-size:var(--t-s);color:var(--grey);padding-top:4px}

/* footer */
footer{border-top:1px solid var(--rule);padding-top:28px;padding-bottom:40px;row-gap:20px;font-size:var(--t-s);color:var(--grey)}
footer svg.mk{width:120px;color:var(--ink)}
footer .cols{display:flex;flex-wrap:wrap;gap:8px 28px}
@media (min-width:761px){footer .a{grid-column:1/4}footer .b{grid-column:4/9}footer .c{grid-column:9/13;text-align:right}}

/* phones */
@media (max-width:760px){
  :root{--bar:48px}
  .brand{grid-column:1/-1}
  .brand .full{display:none}
  .nav{display:none}
  .head .lab,.head .h{grid-column:1/-1}
  .display{font-size:clamp(40px,12.5vw,64px)}
}
@media (prefers-reduced-motion:no-preference){.eye circle{transition:transform .25s ease-out}}

/* personal */
.clock{grid-column:4/7;font-family:var(--f-mono);color:var(--grey);font-size:13px;white-space:nowrap}
.clock b{color:var(--ink);font-weight:400}
.hero .lead{max-width:22em}
.hero figure{margin-top:0}
.work{row-gap:24px;padding-top:var(--rg);border-top:1px solid var(--hair)}
.work+.work{margin-top:var(--rg)}
.work .role{font-family:var(--f-mono);font-size:var(--t-s);color:var(--hi)}
.work h3{font-size:var(--t-h);font-weight:500;letter-spacing:-.03em;line-height:1.04}
.work .body{display:flex;flex-direction:column;gap:22px}
.go{font-family:var(--f-mono);font-size:var(--t-s);color:var(--hi);border-bottom:1px solid currentColor;align-self:flex-start}
.go:hover{text-decoration:none}
@media (min-width:761px){.work .body{grid-column:1/6}.work figure{grid-column:7/13}.work.alt .body{grid-column:8/13;grid-row:1}.work.alt figure{grid-column:1/7;grid-row:1}}
.words{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--f-mono);font-size:var(--t-s);color:var(--grey)}
.words li:not(:last-child)::after{content:" →";color:var(--hi)}
.papers li{border-top:1px solid var(--hair);padding:16px 0;display:grid;grid-template-columns:3em 1fr;gap:0 12px}
.papers li span{font-family:var(--f-mono);font-size:var(--t-s);color:var(--grey);padding-top:4px}
.papers li a{font-weight:500;letter-spacing:-.01em}
.papers li small{display:block;color:var(--grey);font-size:var(--t-s);margin-top:4px}
.portrait img{filter:grayscale(1)}
@media (max-width:760px){.clock{display:none}}

/* v4 (Nadim: "Stay classy and sophisticated. Maybe try a serif." / bolder "didn't mean bigger and colors"):
   Newsreader for text and titles, DM Mono (light) for labels; a quiet hero that says hello. */
.r11{aspect-ratio:1/1}
.seat{aspect-ratio:704/1530}
.h,.work h3{font-weight:400;letter-spacing:-.015em;font-variation-settings:"opsz" 72}
.lead{font-weight:400;font-variation-settings:"opsz" 36;letter-spacing:-.005em}
body{font-variation-settings:"opsz" 14;letter-spacing:0;font-size:calc(var(--t-b) * 1.06)}
.lab,.role,.go,.clock,dt,figcaption,.nav,.papers li span{font-weight:300;letter-spacing:.02em}
.brand{font-family:var(--f-body);font-weight:500;font-size:15px;letter-spacing:0}
.hero{padding-top:clamp(56px,7vw,128px);padding-bottom:var(--rg);row-gap:var(--rg)}
.hero .face{background:#000}
.hero .face img{width:100%;height:auto}
.hero .intro{display:flex;flex-direction:column;gap:clamp(24px,2.6vw,44px)}
.hero .hi{font-size:var(--t-h);font-weight:400;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
.hero .say{font-size:var(--t-h);font-weight:300;line-height:1.08;letter-spacing:-.02em;font-variation-settings:"opsz" 72;color:var(--grey);max-width:13em}
.hero .kick{margin-top:clamp(8px,2vw,40px)}
.band{padding-bottom:var(--sp)}
@media (min-width:761px){
  .hero .intro{grid-column:1/7;grid-row:1;align-self:end}
  .hero .face{grid-column:8/13;grid-row:1}
}
@media (max-width:760px){
  .hero .face{grid-row:1}
  .hero .hi,.hero .say{font-size:clamp(28px,8vw,40px)}
}