/* Approved landing design — independent of the tuning panel. */
main {
  --tune-font: Manrope, sans-serif;
  --tune-name: 19px;
  --tune-body: 15px;
  --tune-label: 13px;
  --tune-weight: 400;
  --tune-name-weight: 500;
  --tune-name-line: 27px;
  --tune-body-line: 24px;
  --tune-row-line: 23px;
  --tune-label-line: 20px;
  --tune-tracking: 0em;
  --tune-sections: 64px;
  --tune-projects: 16px;
  --tune-roles: 16px;
  --tune-intro: 16px;
  --tune-name-label: 0px;
  --tune-top: 92px;
  --tune-mobile-top: 64px;
}
main{--type-headings-font:Manrope,sans-serif;--type-headings-size:19px;--type-headings-weight:500;--type-headings-line:27px;--type-headings-tracking:0em}
main h1{font-family:var(--type-headings-font);font-size:var(--type-headings-size);font-weight:var(--type-headings-weight);line-height:var(--type-headings-line);letter-spacing:var(--type-headings-tracking)}
main{--type-subheadings-font:Manrope,sans-serif;--type-subheadings-size:15px;--type-subheadings-weight:400;--type-subheadings-line:23px;--type-subheadings-tracking:0em}
main summary > span, main .copy h3{font-family:var(--type-subheadings-font);font-size:var(--type-subheadings-size);font-weight:var(--type-subheadings-weight);line-height:var(--type-subheadings-line);letter-spacing:var(--type-subheadings-tracking)}
main{--type-body-font:Manrope,sans-serif;--type-body-size:15px;--type-body-weight:400;--type-body-line:24px;--type-body-tracking:0em}
main header p, main .copy p{font-family:var(--type-body-font);font-size:var(--type-body-size);font-weight:var(--type-body-weight);line-height:var(--type-body-line);letter-spacing:var(--type-body-tracking)}
main{--type-labels-font:Manrope,sans-serif;--type-labels-size:13px;--type-labels-weight:400;--type-labels-line:20px;--type-labels-tracking:0em}
main h2, main small, main footer, main .copy a{font-family:var(--type-labels-font);font-size:var(--type-labels-size);font-weight:var(--type-labels-weight);line-height:var(--type-labels-line);letter-spacing:var(--type-labels-tracking)}
main{margin-top:var(--tune-top)}
main header p{margin-top:var(--tune-intro)}
main section,main footer{margin-top:var(--tune-sections)}
main .experience .item+.item{margin-top:var(--tune-roles)}
main .projects .item+.item{margin-top:var(--tune-projects)}
main summary{gap:var(--tune-name-label)}
main .role summary{flex-direction:column;align-items:flex-start;gap:var(--tune-name-label)}
main .role summary span{width:auto}
@media(max-width:850px){main{margin-top:var(--tune-mobile-top)}}
/* Role line and about (written from desk/content.js by content-sync.mjs) */
main header p.role{margin-top:4px;color:var(--ink)}
/* the email beside it: one click to contact; on a phone it takes its own line rather than wrapping */
main header p.role a{white-space:nowrap}
@media(max-width:480px){main header p.role .sep{display:none}main header p.role a{display:block;width:fit-content}}
main .about{display:flex;flex-direction:column;gap:16px;margin-top:40px}
main .about p{font-family:var(--type-body-font);font-size:var(--type-body-size);line-height:var(--type-body-line);max-width:480px}
/* An organisation's path, with years */
main .copy .path{list-style:none;margin:4px 0 4px;padding:0;display:flex;flex-direction:column;gap:2px}
main .copy .path li{display:flex;justify-content:space-between;gap:16px;font-size:var(--type-labels-size);line-height:var(--type-labels-line);color:var(--ink)}
main .copy .path small{color:var(--muted)}
/* Explorations: what each one is, on its first picture */
.bento-card figcaption{position:absolute;left:0;bottom:0;max-width:100%;padding:5px 9px;background:var(--paper);color:var(--ink);font:400 12px/16px var(--type-labels-font);pointer-events:none}
/* "Make it yours" on its own line, away from the contacts */
main .play-row{margin-top:16px;font-family:var(--type-labels-font);font-size:var(--type-labels-size);line-height:var(--type-labels-line);color:var(--muted)}
/* A case study as a sheet sliding in from the right (sheet.js); a strip of the page stays showing to go back */
:root{--peek:48px}
@media(max-width:850px){:root{--peek:28px}}
main,.theme-switch,.desk-link{transition:transform 620ms cubic-bezier(.22,1,.36,1),opacity 620ms ease,filter 620ms ease}
html.case-open{overflow:hidden}
/* the page steps back: a touch smaller (round the middle of the screen, sheet.js sets the origin)
   dimmed and blurred, sliding left in step with the sheet until its left edge sits in the strip, so the
   strip shows the start of its lines; the corner buttons fade out */
html.case-open main{transform:translateX(calc(14px - var(--page-left,0px))) scale(.94);opacity:.75;filter:blur(3px)}
html.case-open .theme-switch,html.case-open .desk-link{opacity:0;pointer-events:none}
.case-sheet{position:fixed;inset:0;z-index:30;pointer-events:none}
.case-sheet[hidden]{display:none}
.case-peek{position:absolute;left:0;top:0;bottom:0;width:var(--peek);margin:0;padding:0;border:0;background:#0000;cursor:w-resize;pointer-events:none}
html.case-open .case-peek{pointer-events:auto}
.case-panel{position:absolute;top:0;bottom:0;right:0;left:var(--peek);background:var(--paper);border-left:1px solid var(--line);transform:translateX(100%);transition:transform 620ms cubic-bezier(.22,1,.36,1);pointer-events:auto}
html.case-open .case-panel{transform:none}
.case-panel iframe{display:block;width:100%;height:100%;border:0;background:var(--paper);transition:opacity 200ms ease}
/* moving to the next case inside the sheet */
.case-panel iframe.loading{opacity:0}
@media(prefers-reduced-motion:reduce){main,.theme-switch,.desk-link,.case-panel,.case-peek,.case-panel iframe{transition:none}}
/* the descriptive line under each name stays quiet */
main summary > small{opacity:.6}
/* Hover previews on a wide screen: frosted glass instead of plain paper, so what they cover still
   shows through, blurred; the padding is taken back with a negative margin, so the words stay put */
@media(hover:hover) and (min-width:851px){
  main .preview{padding:16px;margin:-16px;background:color-mix(in srgb,var(--paper) 50%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)}
  main .preview .copy{background:none}
}
/* the explorations pass over the sticky portrait and red button, not under them */
#explorations-panel{position:relative;z-index:2}
/* the one personal line under about, ending in a link to the desk */
main .about .off-clock{font-size:14px;line-height:22px;color:var(--muted)}main .about .off-clock a{color:var(--ink)}