/* Layout after Developer-Path: plain text on a solid ground, left-aligned, wide left margin.
   Ground: the CV PDF's gray. Type: Arial at the CV's sizes (12 / 10 / 9 / 8 pt); hierarchy comes from size, never weight.
   After info.cern.ch: plain heading, links always underlined, nothing else. */
:root{
  --bg:#4b4b4d; --fg:#fff;   /* #4B4B4D: the text gray of the CV PDF */
  --bg-q:rgba(75,75,77,.45); --fg-q:rgba(255,255,255,.45);   /* quieter versions (dimmed Index entries) */
  --font:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --t12:12pt; --t10:10pt; --t9:9pt; --t8:8pt; --t7:7pt;
  --margin:2in;
  color-scheme:dark;
}
* {box-sizing:border-box}
html{color:var(--fg)}
body{margin:0;font-family:var(--font);font-size:var(--t10);line-height:1.3;padding:48px 5em 96px var(--margin);text-align:left;position:relative}
main{max-width:85ch}
strong,b,h1,h2{font-weight:normal}
h1{font-size:var(--t12);margin:0 0 2.4em -0.5in}
/* section names open their first sentence at 10pt; the rest of the paragraph steps down to 9pt (smaller, not heavier) */
.lead{font-size:var(--t10)}
main p{font-size:var(--t9)}
p{margin:0 0 .9em}
/* the opening hangs half an inch into the margin; the box reaches out to cover it so its text layer paints there too */
p.sec{margin-top:2.4em;text-indent:-0.5in;margin-left:-0.5in;padding-left:0.5in}
main > p.sec:first-child{margin-top:0}
section{margin-top:7em;scroll-margin-top:48px}
.facts{font-size:var(--t8);line-height:1.3}
.todo{opacity:.55}
/* CERN: every link is underlined */
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
a:hover{text-decoration-thickness:2px}

/* Images: one column on a wider field than the text (from the text's left edge to the numbers column).
   Each image gets about the same visual area: width grows with the square root of its aspect ratio (--ar = w/h),
   so long horizontal drawings span the whole field and tall sheets stay within the screen height. */
:root{--field:calc(100vw - var(--margin) - 5em - 0.6in)}
figure{margin:3.2em 0 0;position:relative;--base:min(calc(var(--field) * .5), 640px);
  --auto:max(40%, min(var(--field), calc(var(--base) * sqrt(var(--ar, 1.5))), calc(82vh * var(--ar, 1.5))));
  /* your own scale (--k) can reach the full screen width at any site scale: 100vw inside the zoomed column is divided back by the zoom */
  width:min(calc(100vw / var(--zoom, 1)), calc(var(--auto) * var(--k, 1)))}
figure img,figure video{display:block;width:100%;height:auto;background:rgba(255,255,255,.06)}
figcaption{font-size:var(--t8);line-height:1.25;margin-top:.45em}
.pending{border:1px dashed currentColor;padding:3em 1em;text-align:center;font-size:var(--t8);opacity:.6}
.cite{display:none}

/* Index: sits in the left margin where the reference keeps its font list; stays in view while scrolling */
#index{position:absolute;top:var(--indexTop,48px);bottom:0;left:20px;width:calc(var(--margin) - 0.5in - 40px);font-size:var(--t8);line-height:1.3;text-align:right}
#index .inner{position:sticky;top:48px}
/* Index heading row: "Phone  Web" sits right next to "Index" */
#index .head{display:flex;flex-direction:row-reverse;gap:1em;align-items:baseline;margin-bottom:.4em}
#index .lead{display:block;font-size:var(--t9)}
#index .view{display:inline-flex;gap:.6em;white-space:nowrap}
#index .view button{font:inherit;font-size:var(--t8);padding:0;border:0;cursor:pointer;color:transparent;background:linear-gradient(var(--bg),var(--bg)) var(--x) var(--y) / var(--w) var(--h) no-repeat fixed, var(--fg);-webkit-background-clip:text;background-clip:text}
#index a{display:block;margin-bottom:.15em;text-decoration:none}
#index a:hover{text-decoration:none}


/* Sources: one number per image on the right edge, level with the image; each opens the full-size file */
#srcs{position:absolute;top:0;right:10px;width:3.4em;font-size:var(--t7);line-height:1.2;text-align:right}
#srcs div{position:absolute;right:0;white-space:nowrap}
#srcs a{color:inherit}

/* White box: sits at --x/--y with size --w/--h, fixed to the screen. Text is painted through a matching fixed layer,
   so it turns gray wherever it sits inside the box. */
html{--x:-10px;--y:-10px;--w:0px;--h:0px;background:var(--bg)}
/* the white box itself: a fixed layer behind the text and images (no fixed backgrounds needed, so Safari/iOS draw it too) */
#boxfill{position:fixed;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:var(--fg);z-index:-1;pointer-events:none}
body{background:transparent}
/* .flip paints text through the box layer. The Index links and image numbers get it directly: text inside a sticky or
   separately layered element isn't reached by a parent's clip. Quieter links use translucent versions of the same colors. */
.flip,#index a,#srcs a{color:transparent;background:linear-gradient(var(--bg),var(--bg)) var(--x) var(--y) / var(--w) var(--h) no-repeat fixed, var(--fg);-webkit-background-clip:text;background-clip:text}
#index.has-current .inner > a:not(.lead):not([aria-current]),#index .view button:not(.on){background:linear-gradient(var(--bg-q),var(--bg-q)) var(--x) var(--y) / var(--w) var(--h) no-repeat fixed, var(--fg-q);-webkit-background-clip:text;background-clip:text}
/* main's box reaches half an inch left so the outdented openings sit inside the painted text area */
main{margin-left:-0.5in;padding-left:0.5in}
/* Scale (bottom of the Index): the projects column zooms out to show more of the page at once.
   Lengths inside a zoomed element are multiplied by the zoom, so the box layer is divided back to stay on the screen box. */
main{zoom:var(--zoom,1)}
/* Text in the column is coloured element by element (each paragraph, heading, caption, CV cell paints its own copy of
   the box layer, divided back by the zoom). One layer on the whole column would only paint inside the column's box and
   would double up with these, so the column itself carries none. */
main :is(p, h1, h2, figcaption, .pending, .row > div){color:transparent;background:linear-gradient(var(--bg),var(--bg)) calc(var(--x) / var(--zoom,1)) calc(var(--y) / var(--zoom,1)) / calc(var(--w) / var(--zoom,1)) calc(var(--h) / var(--zoom,1)) no-repeat fixed, var(--fg);-webkit-background-clip:text;background-clip:text}
main a{color:inherit}
/* The box's frame: the inside lets clicks through to the page; only the edges and corners grab, to scale it from any side */
#box{position:fixed;left:var(--x);top:var(--y);width:var(--w);height:var(--h);z-index:1000;pointer-events:none}
#box .h{position:absolute;pointer-events:auto;touch-action:none}
#box .n,#box .s{left:6px;right:6px;height:12px;cursor:ns-resize}
#box .e,#box .w{top:6px;bottom:6px;width:12px;cursor:ew-resize}
#box .n{top:-6px}#box .s{bottom:-6px}#box .e{right:-6px}#box .w{left:-6px}
#box .nw,#box .ne,#box .sw,#box .se{width:16px;height:16px}
/* visible corner tabs: a small square centred on each corner, so it reads as something you can grab */
#box .nw::after,#box .ne::after,#box .sw::after,#box .se::after{content:"";position:absolute;inset:4px;background:var(--fg);border:1px solid var(--bg)}
/* selected: the tabs fill in, the frame shows, and the inside can be dragged to move the box */
/* while the box fills the screen its tabs and edges tuck just inside the window corners, so they stay visible */
#box.full .nw{left:2px;top:2px}#box.full .ne{right:2px;top:2px}#box.full .sw{left:2px;bottom:2px}#box.full .se{right:2px;bottom:2px}
#box.full .n{top:0}#box.full .s{bottom:0}#box.full .e{right:0}#box.full .w{left:0}
/* while the box isn't selected, a corner tab that sits over an image hides and lets clicks through to the image */
#box:not(.selected) .h.under{pointer-events:none}
#box:not(.selected) .h.under::after{display:none}
#box.selected{pointer-events:auto;cursor:move;outline:1px solid var(--bg);outline-offset:-1px}
#box.selected .nw::after,#box.selected .ne::after,#box.selected .sw::after,#box.selected .se::after{background:var(--bg)}
#box .nw{left:-8px;top:-8px;cursor:nwse-resize}#box .se{right:-8px;bottom:-8px;cursor:nwse-resize}
#box .ne{right:-8px;top:-8px;cursor:nesw-resize}#box .sw{left:-8px;bottom:-8px;cursor:nesw-resize}
#box .h:focus-visible{outline:1px solid var(--bg)}

/* Top bar: short facts, full width; the panel runs up through it and its text flips the same way */
#brief{position:relative;margin:-48px calc(-1 * var(--margin)) 48px;margin-right:-5em;padding:20px 20px 18px;font-size:var(--t8);line-height:1.35;columns:15em;column-gap:2.2em;font-variant-numeric:tabular-nums}
#brief p{margin:0 0 .2em;break-inside:avoid}
#brief .lead{font-size:var(--t9)}

/* CV: the PDF's layout (name, contact line, section heads, date column + details), each level one size down instead of heavier */
.cv main{max-width:7in}
.cv h1{font-size:var(--t12);margin:0 0 .3em}
.cv .contact{font-size:var(--t9);margin:0 0 2em}
.cv h2{font-size:var(--t10);margin:2em 0 1em}
.cv .row{display:grid;grid-template-columns:1.8in 1fr;gap:0 .2in;font-size:var(--t9);margin:0 0 1.2em}
.cv .row .sub,.cv .row .desc{font-size:var(--t8)}
.cv .row .desc{margin-top:.5em}
.cv .pdf{font-size:var(--t8);margin-top:3em}

@media (max-width:900px){
  :root{--margin:calc(0.5in + 16px)}
  body{padding-right:20px}
  #brief{margin-right:-20px}
  #index{position:static;width:auto;text-align:left;margin:0 0 3em}
  #index .inner{position:static}
  #index a{display:inline;margin-right:1em;white-space:normal;overflow:visible}
  #index .inner{line-height:1.6}
  #srcs{display:none}
  /* phones: images fill the column by default; your own scale and moves still apply */
  figure{--field:calc(100vw - var(--margin) - 20px);--auto:var(--field)}
  .cite{display:inline}
  .cite a{font-size:var(--t7);vertical-align:super;line-height:0;text-decoration:underline}
  .cv .row{grid-template-columns:1fr}
}


/* Images behave like the white box: press to select and drag to move; corner tabs scale it from any corner.
   --k scales the automatic size, --dx/--dy move it off its place in the column (the layout around it stays put). */
/* moved with relative offsets, not transforms: a transform would break the text-flip layer */
figure{left:var(--dx,0px);top:var(--dy,0px)}
figure img,figure video{cursor:move;-webkit-user-drag:none;user-select:none}
/* tabs and frame stay the same size on screen at any site scale (the column is zoomed, so they are divided back by --zoom) */
figure{--u:calc(1px / var(--zoom, 1))}
figure.sel{box-shadow:0 0 0 var(--u) var(--fg),0 0 0 calc(2 * var(--u)) var(--bg)}
figure .t{position:absolute;width:calc(16 * var(--u));height:calc(16 * var(--u));display:none;touch-action:none;z-index:1}
figure .t::after{content:"";position:absolute;inset:calc(4 * var(--u));background:var(--fg);border:var(--u) solid var(--bg)}
figure:hover .t,figure.sel .t{display:block}
figure.sel .t::after{background:var(--bg);border-color:var(--fg)}
/* the bottom tabs sit on the image's bottom corners (--mh is the image's height, set by the script) */
figure .t.nw{left:calc(-8 * var(--u));top:calc(-8 * var(--u));cursor:nwse-resize}figure .t.se{right:calc(-8 * var(--u));top:calc(var(--mh,0px) - 8 * var(--u));cursor:nwse-resize}
figure .t.ne{right:calc(-8 * var(--u));top:calc(-8 * var(--u));cursor:nesw-resize}figure .t.sw{left:calc(-8 * var(--u));top:calc(var(--mh,0px) - 8 * var(--u));cursor:nesw-resize}
#index .scale{display:block;margin-top:.5em;white-space:nowrap}
#index .scale button,#index .scale span{font:inherit;padding:0 .15em;border:0;cursor:pointer;color:transparent;background:linear-gradient(var(--bg),var(--bg)) var(--x) var(--y) / var(--w) var(--h) no-repeat fixed, var(--fg);-webkit-background-clip:text;background-clip:text}
#index .scale span{cursor:default;font-variant-numeric:tabular-nums}
#index .reset{display:block;margin-top:1.2em;font:inherit;padding:0;border:0;background:none;cursor:pointer;text-align:right;width:100%;color:transparent;background:linear-gradient(var(--bg),var(--bg)) var(--x) var(--y) / var(--w) var(--h) no-repeat fixed, var(--fg);-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){#index .reset{display:inline;width:auto;margin:0 1em 0 0}#index .scale{display:inline;margin:0}}
/* touch screens: a swipe on an image still scrolls the page; tap to select it, then drag to move. Tabs get finger-sized. */
@media (pointer:coarse){
  figure:hover .t{display:none}figure.sel .t{display:block}
  figure img,figure video{touch-action:pan-x pan-y pinch-zoom}
  figure.sel img,figure.sel video{touch-action:none}
  figure .t{width:calc(32 * var(--u));height:calc(32 * var(--u))}
  figure .t::after{inset:calc(10 * var(--u))}
  figure .t.nw{left:calc(-16 * var(--u));top:calc(-16 * var(--u))}figure .t.ne{right:calc(-16 * var(--u));top:calc(-16 * var(--u))}
  figure .t.se{right:calc(-16 * var(--u));top:calc(var(--mh,0px) - 16 * var(--u))}figure .t.sw{left:calc(-16 * var(--u));top:calc(var(--mh,0px) - 16 * var(--u))}
  #box .nw,#box .ne,#box .sw,#box .se{width:32px;height:32px}
  #box .nw::after,#box .ne::after,#box .sw::after,#box .se::after{inset:11px}
  #box .nw{left:-16px;top:-16px}#box .ne{right:-16px;top:-16px}#box .sw{left:-16px;bottom:-16px}#box .se{right:-16px;bottom:-16px}
  #box.full .nw{left:0;top:0}#box.full .ne{right:0;top:0}#box.full .sw{left:0;bottom:0}#box.full .se{right:0;bottom:0}
  #box.selected{touch-action:none}
}
/* moved images never make the page scroll sideways */
html,body{overflow-x:clip}

/* the opening "Selected work" line runs across the whole field on one line (wraps only when the screen is too narrow) */
main p.intro{max-width:none;width:calc((100vw - var(--margin) - 5em) / var(--zoom, 1))}
@media (max-width:900px){main p.intro{width:auto}}

/* Safari and every iPhone/iPad browser: background-attachment:fixed is unsupported or unreliable there, so each text
   element's layer is placed by the script (--ox/--oy = the element's position on screen) and scrolls with the element. */
html.nofixed .flip,html.nofixed #index a,html.nofixed #srcs a,html.nofixed #index .reset,html.nofixed #index .scale button,html.nofixed #index .scale span,html.nofixed #index .view button,html.nofixed #index .view button:not(.on),
html.nofixed #index.has-current .inner > a:not(.lead):not([aria-current]){background-attachment:scroll;background-position:calc(var(--x) - var(--ox, 0px)) calc(var(--y) - var(--oy, 0px))}
html.nofixed main :is(p, h1, h2, figcaption, .pending, .row > div){background-attachment:scroll;background-position:calc((var(--x) - var(--ox, 0px)) / var(--zoom, 1)) calc((var(--y) - var(--oy, 0px)) / var(--zoom, 1))}
/* iPhone: no double-tap page zoom (double-tap lets go of a selection), no save-image menu while moving images */
html{touch-action:manipulation}
figure img{-webkit-touch-callout:none}

/* ---- Phones (under 900px wide): no dragging. A white window sits fixed in the middle of the screen and the page
   scrolls through it; text flips to gray inside it, white outside. Images stack full width (tap one for full size)
   and their numbers sit on the right edge. ---- */
@media (max-width:900px){
  #box{display:none}
  #index .reset,#index .scale{display:none!important}
  main{zoom:1!important}
  figure{left:0!important;top:0!important;width:100%!important;z-index:auto!important;box-shadow:none!important}
  figure .t{display:none!important}
  figure img,figure video{cursor:zoom-in;touch-action:auto}
  body{padding-right:2.4em}
  #srcs{display:block;right:6px;width:2em}
  .cite{display:none!important}
}


/* Double-click the white box: the page and the box swap colours (page white, box gray), and all text follows */
html.inverted{--bg:#fff;--fg:#4b4b4d;--bg-q:rgba(255,255,255,.45);--fg-q:rgba(75,75,77,.45)}

/* Phone preview on a computer ("Phone" next to Index): the site in a phone-sized frame in the middle of the screen */
#phoneview{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
#phoneview iframe{width:390px;height:844px;max-height:92vh;border:0;background:var(--bg);box-shadow:0 0 0 1px var(--fg)}
#phoneview .x{position:absolute;top:14px;right:20px;font:inherit;font-size:var(--t12);color:#fff;background:none;border:0;cursor:pointer}
@media (max-width:900px){#index .head{flex-direction:row;justify-content:flex-start}}