/* SS4 Display cut to AEGIJLMNSU (JAMES, LEUNG, the drop cap I); tools/build_fonts.sh rewrites this URI. */
@font-face {
  font-family: "SS4 Mast";
  src: url(data:font/woff2;base64,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) format("woff2");
  font-weight: 760;
  font-display: block;
}

@font-face {
  font-family: "SS4 Display";
  src: url(../assets/fonts/ss4-display.woff2) format("woff2");
  font-weight: 760;
  font-display: swap;
}

@font-face {
  font-family: "Schibsted";
  src: url(../assets/fonts/schibsted.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* "SS4 Text" is added by the head script. Fallbacks: size-adjust = this copy's width in SS4 / in the
   local font; ascent and descent = SS4's metrics / size-adjust. */
@font-face {
  font-family: "SS4 Display FB Georgia";
  src: local("Georgia Bold"), local("Georgia-Bold");
  font-weight: 760;
  size-adjust: 81.9%;
  ascent-override: 126.5%;
  descent-override: 40.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Display FB Noto";
  src: local("Noto Serif Bold"), local("NotoSerif-Bold");
  font-weight: 760;
  size-adjust: 83.5%;
  ascent-override: 124%;
  descent-override: 40.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Display FB DejaVu";
  src: local("DejaVu Serif Bold"), local("DejaVuSerif-Bold");
  font-weight: 760;
  size-adjust: 74.6%;
  ascent-override: 138.9%;
  descent-override: 44.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB Georgia";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 105.1%;
  ascent-override: 98.6%;
  descent-override: 31.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB Georgia";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  size-adjust: 95.3%;
  ascent-override: 108.7%;
  descent-override: 35.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB Noto";
  src: local("Noto Serif"), local("NotoSerif"), local("NotoSerif-Regular");
  font-style: normal;
  size-adjust: 97.7%;
  ascent-override: 106%;
  descent-override: 34.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB Noto";
  src: local("Noto Serif Italic"), local("NotoSerif-Italic");
  font-style: italic;
  size-adjust: 92.3%;
  ascent-override: 112.2%;
  descent-override: 36.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB DejaVu";
  src: local("DejaVu Serif"), local("DejaVuSerif");
  font-style: normal;
  size-adjust: 90.4%;
  ascent-override: 114.6%;
  descent-override: 37.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "SS4 Text FB DejaVu";
  src: local("DejaVu Serif Italic"), local("DejaVuSerif-Italic"), local("DejaVu Serif"), local("DejaVuSerif");
  font-style: italic;
  size-adjust: 83.4%;
  ascent-override: 124.2%;
  descent-override: 40.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB Arial";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  font-weight: 400 599;
  size-adjust: 104.1%;
  ascent-override: 93.8%;
  descent-override: 24.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB Arial";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  font-weight: 600 700;
  size-adjust: 98.2%;
  ascent-override: 99.5%;
  descent-override: 26.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB Roboto";
  src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular");
  font-weight: 400 599;
  size-adjust: 105.8%;
  ascent-override: 92.3%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 600 700;
  size-adjust: 105.9%;
  ascent-override: 92.2%;
  descent-override: 24.3%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB DejaVu";
  src: local("DejaVu Sans"), local("DejaVuSans");
  font-weight: 400 599;
  size-adjust: 92.7%;
  ascent-override: 105.3%;
  descent-override: 27.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Schibsted FB DejaVu";
  src: local("DejaVu Sans Bold"), local("DejaVuSans-Bold");
  font-weight: 600 700;
  size-adjust: 88.1%;
  ascent-override: 110.8%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}


:root {
  --white: #FFFFFF;          /* the page */
  --ink: #000000;            /* text: true black */
  --ink-2: #5C5C5C;          /* neutral grey, 6.7:1 on white */
  --hairline: rgb(0 0 0 / .15);   /* ink at 15%: rules between rows */
  --cobalt: #2E5E9C;         /* cover sky, top of the frame: the one accent */
  --cover-ink: #FFFBF0;      /* sunlit rope in the cover photo: type on sky and night */
  --ice: #C9D9DF;            /* the quarter-zip: selection */
  --lavender: #B8A7B4;       /* the office wall: the portrait before it loads */
  --night: #000000;          /* the night photo fades into it */
  --night-ink-2: #A3A3A3;    /* neutral grey, 8.3:1 on night */
  --night-link: #8DB9F2;     /* the cover sky near the horizon, lightened: links on night */

  --font-masthead: "SS4 Mast", "SS4 Display FB Georgia", "SS4 Display FB Noto", "SS4 Display FB DejaVu", Georgia, serif;
  --font-display: "SS4 Display", "SS4 Display FB Georgia", "SS4 Display FB Noto", "SS4 Display FB DejaVu", Georgia, serif;
  --font-text: "SS4 Text", "SS4 Text FB Georgia", "SS4 Text FB Noto", "SS4 Text FB DejaVu", Georgia, serif;
  --font-sans: "Schibsted", "Schibsted FB Arial", "Schibsted FB Roboto", "Schibsted FB DejaVu", Arial, sans-serif;

  --margin: 20px;
  --gutter: 12px;
  --right-page-inset: calc(var(--margin) - var(--gutter) / 2);   /* column 7 + this = the spine + one margin, where the cover story's copy starts */
  --margin-left: max(var(--margin), env(safe-area-inset-left, 0px));
  --margin-right: max(var(--margin), env(safe-area-inset-right, 0px));
  --vh: 1vh;

  --cover-small: clamp(.875rem, .82rem + .2vw, 1.0625rem);
  --type-small: 400 clamp(.875rem, .8rem + .2vw, 1rem)/1.45 var(--font-sans);
  --type-body: 400 clamp(1.0625rem, .98rem + .28vw, 1.3125rem)/1.5 var(--font-text);
  --size-xl: clamp(min(3.25rem, calc((100vw - 40px) / 3.4)), 1.4rem + 6.2vw, 9.5rem);
  --size-l: clamp(min(2.5rem, calc((100vw - 40px) / 5.1)), 1.2rem + 4.2vw, 6.5rem);
  --size-lead: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
  --size-toc: clamp(1.375rem, 1.1rem + 1.4vw, 2.625rem);
  --size-item: clamp(1.4375rem, 1.1rem + 1.2vw, 2.375rem);
  --size-m: clamp(1.25rem, .75rem + 1.05vw, 2.125rem);
  --size-standfirst: clamp(1.25rem, .95rem + .9vw, 1.875rem);
  --section-padding: clamp(4.5rem, 3rem + 5vw, 10rem);
}

@supports (height: 1svh) {
  :root {
    --vh: 1svh;
  }
}

@media (min-width: 768px) {
  :root {
    --margin: 32px;
    --gutter: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --margin: 48px;
    --gutter: 24px;
  }
}

@media (min-width: 1800px) {
  :root {
    --margin: 64px;
    --gutter: 32px;
  }
}

@media (min-width: 2400px) {
  :root {
    --margin: 96px;
    --gutter: 40px;
  }
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  color-scheme: light;
  background: var(--white);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font: var(--type-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--cobalt);
  text-decoration-line: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .2em;
}

a:hover {
  text-decoration-thickness: .12em;
}

:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}

abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: .02em;
  text-decoration: none;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* SS4 has no non-breaking hyphen. */
.nowrap {
  white-space: nowrap;
}

/* Lining, slashed zero: the 0 in c0mpiled must not read as an o. */
.brand {
  font-variant-numeric: lining-nums slashed-zero;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The strap's full stops, for screen readers and copied text: inline, so a copy doesn't put them on lines of their own,
   and top-aligned, so the cover fit check finds their glyphs on the strap's line rather than a line below it. */
.stop {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin-right: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  vertical-align: top;
}

.skip-link {
  position: absolute;
  left: var(--margin-left);
  top: -5rem;
  z-index: 30;
  background: var(--white);
  color: var(--ink);
  padding: .65rem .9rem;
  font: 600 var(--cover-small)/1.3 var(--font-sans);
  text-decoration: none;
}

.skip-link:focus {
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  outline-color: var(--ink);
}

::selection {
  background: var(--ice);
  color: var(--ink);
}


/* Measured on the 3:4 photo: hair top at 27% of its height, head's right edge .079 of its width right of
   centre. On JAMES: 2.725em wide, E's ink .3625em right of centre, baseline .8505em, cap height .67em. */
.cover {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  overflow: clip;
  background: var(--cobalt);
  color: var(--cover-ink);
  isolation: isolate;
  --cover-height: max(calc(var(--vh) * 100), 34rem, calc(var(--cover-width) * .24 + 12rem));
  --cover-width: 100cqw;
  --stage-width: var(--cover-width);
  --stage-height: calc(var(--stage-width) * 4 / 3);
  --head-anchor: .33;
  --stage-top: max(calc(var(--cover-height) - var(--stage-height)), calc(var(--cover-height) * var(--head-anchor) - var(--stage-width) * .36));
  --masthead-max: calc((var(--cover-width) - var(--margin-left) - var(--margin-right)) / 2.8);
  --masthead-size: clamp(calc(var(--stage-width) * .24), calc(var(--cover-height) * .49), var(--masthead-max));
  --stage-shift: 0px;
  --baseline: calc(var(--stage-top) + var(--stage-height) * .332);
  --cap-line: calc(var(--baseline) - .67 * var(--masthead-size));
  --cap-gap: clamp(1rem, calc(var(--vh) * 3), 2rem);
}

@supports not (width: 1cqw) {
  .cover {
    --cover-width: 100vw;
  }
}

/* The top row is 15.5em of text plus two 1.25rem gaps; the shoes end at 88%: 1.369 = 1 / ((.88 - .332) x 4/3). */
@media screen and (max-aspect-ratio: 4/5) {
  html:not(.stacked) .cover {
    --cover-height: calc(var(--vh) * 100);
    --nameplate-margin: max(12px, 2vw, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --masthead-size: calc((var(--cover-width) - 2 * var(--nameplate-margin)) / 2.754);
    --top-row-wrap: clamp(0px, calc((var(--cover-small) * 15.5 + 2.5rem - var(--cover-width) + var(--margin-left) + var(--margin-right)) * 1000), calc(var(--cover-small) * 1.3));
    --nameplate-cap-line: calc(env(safe-area-inset-top, 0px) + 18px + var(--cover-small) * 1.3 + var(--top-row-wrap) + 3px + 1rem);
    --foot-height: 13.5rem;
    --stage-width: min(calc(var(--masthead-size) * 4.65), max(calc(var(--cover-width) * 1.15), calc((var(--cover-height) - var(--nameplate-cap-line) - var(--masthead-size) * .67 - var(--foot-height)) * 1.369)));
    --stage-top: calc(var(--nameplate-cap-line) + var(--masthead-size) * .67 - var(--stage-height) * .332);
    --stage-shift: min(0px, calc(var(--masthead-size) * .3805 - var(--stage-width) * .079));
    --below-stage: max(0px, calc(var(--cover-height) - var(--stage-top) - var(--stage-height)));
  }
}

@media screen and (min-aspect-ratio: 7/10) and (max-aspect-ratio: 4/5) {
  html:not(.stacked) .cover {
    --foot-height: 17rem;
    --stage-width: min(calc(var(--masthead-size) * 4.65), max(var(--cover-width), calc((var(--cover-height) - var(--nameplate-cap-line) - var(--masthead-size) * .67 - var(--foot-height)) * 1.369)));
  }
}

@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 13/10) {
  .cover {
    --stage-width: max(var(--cover-width), calc(var(--cover-height) * .78));
    --head-anchor: .42;
    --masthead-size: clamp(calc(var(--stage-width) * .24), calc(var(--cover-height) * .34), var(--masthead-max));
  }
}

@media (min-aspect-ratio: 3/2) and (max-height: 520px) {
  .cover {
    --cover-height: max(calc(var(--vh) * 100), calc(var(--cover-width) * .237 + 3.5rem));
    --masthead-size: clamp(calc(var(--stage-width) * .24), calc(var(--cover-height) * .42), var(--masthead-max));
  }
}

.cover ::selection {
  background: var(--cover-ink);
  color: var(--cobalt);
}

.cover :focus-visible {
  outline-color: var(--cover-ink);
}

.cover a {
  color: inherit;
}

.cover-height-probe {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: var(--cover-height);
  visibility: hidden;
}

.cover-sizer {
  height: max(var(--cover-height), min(calc(var(--stage-top) + var(--stage-height) * .96), calc(var(--cover-height) * 2.5)));
}

.stage {
  position: absolute;
  left: 50%;
  top: var(--stage-top);
  width: var(--stage-width);
  height: var(--stage-height);
  translate: calc(-50% + var(--stage-shift)) 0;
}

/* The sky model fitted to the photo, a quarter stop darker, every 10% of the frame (tools/build_images.py). */
.sky-plate {
  position: absolute;
  inset: -60% 0 0 0;
  background: linear-gradient(
    #2E5E9C 0%,
    #2E5E9C 37.5%,
    #2E5F9C 43.75%,
    #2F619D 50%,
    #3164A1 56.25%,
    #3368A5 62.5%,
    #376DAC 68.75%,
    #3B73B4 75%,
    #417ABD 81.25%,
    #4883C8 87.5%,
    #508CD4 93.75%,
    #5A97E1 100%
  );
}

.night-plate,
.night-zenith {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* The sky plate three stops darker. */
.night-plate {
  inset: -60% -1px 0;
  background: linear-gradient(
    #0B1F39 0%,
    #0B1F39 37.5%,
    #0B2039 43.75%,
    #0C213A 50%,
    #0C223C 56.25%,
    #0D243D 62.5%,
    #0F2640 68.75%,
    #112844 75%,
    #132B47 81.25%,
    #162F4C 87.5%,
    #1A3351 93.75%,
    #1E3756 100%
  );
}

.night-zenith {
  left: -1px;
  right: -1px;
  top: calc(-1 * var(--stage-top));
  height: var(--cover-height);
  background: linear-gradient(#071629 0%, rgb(7 22 41 / .9) 22%, rgb(7 22 41 / .45) 52%, rgb(7 22 41 / 0) 85%);
}

.night-plate::before,
.night-zenith::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: var(--cover-height);
}

.night-plate::before {
  background: #0B1F39;
}

.night-zenith::before {
  background: #071629;
}

.masthead {
  position: absolute;
  inset-inline: -60%;
  top: calc(var(--stage-height) * .332 - .8505 * var(--masthead-size));
  translate: calc(-1 * var(--stage-shift)) 0;
  text-align: center;
  white-space: nowrap;
  font: 760 var(--masthead-size)/1 var(--font-masthead);
  letter-spacing: -.005em;
  color: var(--cover-ink);
}

.masthead .first-name {
  text-transform: uppercase;
}

/* JAMES and LEUNG are sized to the cover's width: user text spacing (WCAG 1.4.12) would push them off its edges and,
   on the front, onto the cover lines. */
.masthead,
.masthead *,
.back-masthead {
  letter-spacing: -.005em !important;
  word-spacing: 0 !important;
  line-height: 1 !important;
}

.cutout,
.cutout img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.no-cutout .cutout {
  display: none;
}

.cover-text {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.cover-top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: var(--margin-left);
  right: var(--margin-right);
  display: flex;
  align-items: baseline;
  column-gap: min(1.25rem, 6.25vw);
}

.cover-name,
.email-link,
.resume-link,
.line-kicker {
  font: 450 var(--cover-small)/1.3 var(--font-sans);
}

.cover-name {
  font-weight: 600;
}

.strap {
  flex: 1 1 0;
  min-width: 0;
  font: 450 var(--cover-small)/1.38 var(--font-sans);
  text-wrap: pretty;
}

.strap-segment:where(:not(:last-child)) {
  margin-right: .75em;
}

@media (min-width: 48rem) {
  .strap-segment {
    white-space: nowrap;
  }
}

.email-link {
  white-space: nowrap;
}

.cover-lines a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.line-kicker {
  display: block;
  line-height: 1.2;
}

.line-title {
  display: block;
  font: 760 var(--size-m)/1.04 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-top: .3em;
}

.lead-line .line-title {
  margin-top: 0;
  font-size: clamp(1.75rem, .9rem + 2.9vw, 4.75rem);
  line-height: .94;
  letter-spacing: -.012em;
}

.line-deck {
  display: block;
  font: 450 clamp(.875rem, .8rem + .3vw, 1.1875rem)/1.38 var(--font-sans);
  margin-top: .7em;
  text-wrap: pretty;
}

.cover-lines a:hover .line-title {
  text-decoration: underline;
  text-decoration-thickness: .05em;
  text-underline-offset: .12em;
}

/* .27 of the stage keeps both columns clear of the figure down to row 50%. */
.lead-line {
  position: absolute;
  left: var(--margin-left);
  width: min(22rem, calc(var(--stage-width) * .27 - var(--margin-left)));
  top: calc(var(--baseline) + .149 * var(--masthead-size) + clamp(1.75rem, calc(var(--vh) * 3), 2.5rem));
}

.side-lines {
  list-style: none;
  position: absolute;
  right: var(--margin-right);
  width: min(23rem, calc(var(--stage-width) * .27 - var(--margin-right)));
  text-align: right;
  top: calc(var(--baseline) + clamp(1.5rem, calc(var(--vh) * 4), 3rem));
  display: grid;
  gap: clamp(.9rem, .5rem + 1.1vw, 1.75rem);
}

@media (min-aspect-ratio: 3/2) and (max-height: 520px) {
  .cover-top {
    position: static;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin-right) 0 var(--margin-left);
  }

  .cover-name {
    margin-right: auto;
  }

  .strap {
    position: absolute;
    left: var(--margin-left);
    top: calc(var(--baseline) + .149 * var(--masthead-size) + .9rem);
    width: min(16rem, calc(var(--stage-width) * .27 - var(--margin-left)));
  }

  .strap-segment {
    display: block;
    white-space: normal;
    margin-right: 0;
  }

  .lead-line {
    left: auto;
    right: var(--margin-right);
    width: min(15rem, calc(var(--stage-width) * .27 - var(--margin-right)));
    text-align: right;
    top: calc(var(--baseline) + 2.25rem);
  }

  .lead-line .line-title {
    font-size: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  }

  .line-deck,
  .side-lines {
    display: none;
  }
}

@media (max-aspect-ratio: 13/10) {
  .cover-text {
    inset: 0 0 auto;
    height: calc(var(--cap-line) - var(--cap-gap));
    container: sky-band / size;
  }

  .cover-top {
    position: static;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin-right) 0 var(--margin-left);
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) auto auto;
    row-gap: .65rem;
  }

  .cover-name {
    grid-area: 1 / 1;
  }

  .email-link {
    grid-area: 1 / 2;
  }

  .resume-link {
    grid-area: 1 / 3;
  }

  .strap {
    grid-area: 2 / 1 / 3 / -1;
    max-width: 34em;
  }

  .cover-lines {
    position: absolute;
    left: var(--margin-left);
    right: var(--margin-right);
    bottom: 0;
    border-top: 1px solid rgb(255 251 240 / .55);
    padding-top: .75rem;
  }

  .lead-line {
    position: static;
    width: auto;
    max-width: 34rem;
  }

  .lead-line .line-title {
    font-size: clamp(1.625rem, 1rem + 2.2vw, 2.75rem);
  }

  .side-lines,
  .line-deck {
    display: none;
  }
}

@media (max-aspect-ratio: 4/5) {
  .strap-segment {
    display: block;
    margin-right: 0;
  }
}

@media screen and (max-aspect-ratio: 4/5) {
  /* J's ink starts .066em before its box, S's ends .037em inside: (.066 + .037) / 2 = .0515em. */
  html:not(.stacked) .masthead {
    translate: calc(var(--masthead-size) * .0515 - var(--stage-shift)) 0;
  }

  html:not(.stacked) :is(.sky-plate, .night-plate) {
    bottom: calc(-1 * var(--below-stage));
    background-size: 100% calc(100% - var(--below-stage));
    background-repeat: no-repeat;
  }

  html:not(.stacked) .sky-plate {
    background-color: #5A97E1;
  }

  html:not(.stacked) .night-plate {
    background-color: #1E3756;
  }

  html:not(.stacked) .foot-scrim {
    display: block;
    position: absolute;
    inset: 80% 0 calc(-1 * var(--below-stage));
    background: linear-gradient(
      rgb(46 94 156 / 0),
      rgb(46 94 156 / .4) calc(var(--stage-height) * .06),
      rgb(46 94 156 / .8) calc(var(--stage-height) * .11),
      rgb(46 94 156 / .93) calc(var(--stage-height) * .16),
      rgb(46 94 156 / .96) calc(var(--stage-height) * .22)
    );
  }

  /* The night plate's top colour. Nearly opaque wherever the cobalt foot scrim (from 80%) has any alpha,
     so no day shows at the foot at night; it lifts with the horizon. */
  html:not(.stacked) .night-foot {
    position: absolute;
    inset: 72% 0 calc(-1 * var(--below-stage));
    background: linear-gradient(
      rgb(11 31 57 / 0),
      rgb(11 31 57 / .55) calc(var(--stage-height) * .08),
      rgb(11 31 57 / .9) calc(var(--stage-height) * .11),
      rgb(11 31 57 / 1) calc(var(--stage-height) * .14)
    );
  }

  html:is(.intro, .dawn):not(.stacked) .night-foot {
    display: block;
  }

  html:not(.stacked) .cover-text {
    inset: 0;
    height: auto;
    container-type: normal;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    grid-template-columns: minmax(min-content, 1fr) auto auto;
    column-gap: min(1.25rem, 6.25vw);
    padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin-right) calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, calc(var(--vh) * 2.5), 2rem)) var(--margin-left);
  }

  html:not(.stacked) .cover-top {
    display: contents;
  }

  html:not(.stacked) :is(.cover-name, .email-link, .resume-link) {
    align-self: baseline;
  }

  html:not(.stacked) .strap {
    grid-area: 3 / 1 / 4 / -1;
  }

  html:not(.stacked) .cover-lines {
    grid-area: 4 / 1 / 5 / -1;
    position: static;
    margin-top: .875rem;
  }

  html:not(.stacked) .lead-line .line-title {
    font-size: clamp(2rem, .75rem + 6.4vw, 3rem);
    line-height: .92;
  }

  html:not(.stacked) .line-deck {
    display: block;
  }
}

@media screen and (max-aspect-ratio: 4/5) and (max-height: 48.5rem) {
  html:not(.stacked) .line-deck {
    display: none;
  }
}

@media screen and (max-aspect-ratio: 4/5) and (max-height: 36rem) {
  html:not(.stacked) .cover-lines {
    display: none;
  }
}

@container sky-band (max-height: 11.5rem) {
  .cover-lines {
    display: none;
  }
}

@container sky-band (min-height: 17rem) and (min-width: 36rem) {
  .line-deck {
    display: block;
  }
}

@supports not (container-type: size) {
  @media (max-aspect-ratio: 13/10) {
    .cover-lines {
      display: none;
    }
  }
}

.stacked .cover {
  display: flex;
  flex-direction: column;
  --stage-width: var(--cover-width);
  --stage-top: 0px;
  --stage-shift: 0px;
  --masthead-size: min(var(--masthead-max), calc(var(--cover-width) * .3));
}

.stacked .cover-sizer {
  display: none;
}

.stacked .cover-text {
  position: relative;
  order: -1;
  inset: auto;
  height: auto;
  container-type: normal;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--margin-right) 0 var(--margin-left);
}

.stacked .cover-top {
  position: static;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) auto auto;
  row-gap: .65rem;
}

.stacked .cover-name {
  grid-area: 1 / 1;
}

.stacked .email-link {
  grid-area: 1 / 2;
}

.stacked .resume-link {
  grid-area: 1 / 3;
}

.stacked .strap {
  position: static;
  width: auto;
  grid-area: 2 / 1 / 3 / -1;
  max-width: 34em;
}

.stacked .strap-segment {
  display: block;
  white-space: normal;
  margin-right: 0;
}

.stacked .cover-lines {
  position: static;
  display: block;
  margin-top: 1.25rem;
  border-top: 1px solid rgb(255 251 240 / .55);
  padding-top: .75rem;
}

.stacked .lead-line {
  position: static;
  width: auto;
  max-width: 34rem;
  text-align: left;
}

.stacked .lead-line .line-title {
  font-size: clamp(1.625rem, 1rem + 2.2vw, 2.75rem);
}

.stacked .side-lines,
.stacked .line-deck {
  display: none;
}

.stacked .stage {
  position: relative;
  left: auto;
  top: auto;
  translate: none;
  flex: none;
  margin-top: calc(1.5rem - var(--stage-height) * .332 + .67 * var(--masthead-size));
}

.stacked .night-zenith {
  top: -60%;
  height: calc(60% + var(--cover-height));
}

@media (min-aspect-ratio: 3/2) and (min-height: 521px) {
  .cover {
    --cover-small: min(1.5rem, max(clamp(.875rem, .82rem + .2vw, 1.0625rem), calc(var(--masthead-size) * .036)));
  }

  .line-title {
    font-size: min(3rem, max(var(--size-m), calc(var(--masthead-size) * .062)));
  }

  .lead-line .line-title {
    font-size: min(6rem, max(clamp(1.75rem, .9rem + 2.9vw, 4.75rem), calc(var(--masthead-size) * .125)));
  }

  .line-deck {
    font-size: min(1.625rem, max(clamp(.875rem, .8rem + .3vw, 1.1875rem), calc(var(--masthead-size) * .037)));
  }

  .lead-line {
    width: min(max(22rem, calc(var(--masthead-size) * .8)), calc(var(--stage-width) * .27 - var(--margin-left)));
  }

  .side-lines {
    width: min(max(23rem, calc(var(--masthead-size) * .82)), calc(var(--stage-width) * .27 - var(--margin-right)));
  }
}

/* Set by the fit check in index.html; keep these after every rule that shows the lines. */
html.hide-lead-deck .line-deck {
  display: none;
}

html.hide-side-lines .side-lines {
  display: none;
}

html.hide-cover-lines .cover-lines {
  display: none;
}

/* Without JavaScript the fit check can't run: show only the lines that fit everywhere. */
html:not(.js) .side-lines,
html:not(.js) .line-deck {
  display: none;
}

html.intro :is(.night-plate, .night-zenith, .shade, .night-foot) {
  opacity: 1;
}

.foot-scrim,
.night-foot {
  display: none;
  pointer-events: none;
}

.night-foot {
  opacity: 0;
}

.shade {
  display: none;
  opacity: 0;
}

html:is(.intro, .dawn) .shade {
  display: block;
}

.shade,
.shade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Each zero-size shadow takes an edge pixel's alpha a to 1 - (1 - a)^2, so the photo's soft edge can't show
   through the silhouette as a pale rim. */
.shade img {
  filter: brightness(0) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000);
}

.no-cutout .shade img {
  visibility: hidden;
}

/* Composited from the opener's first frame and kept so: dropping the layer when the dawn ends shifts glyphs. */
html.opener .masthead {
  will-change: transform;
}

/* The head script's failsafe, when js/site.js never runs: the same dawn, as transitions. */
html.failsafe :is(.night-plate, .night-foot) {
  transition: opacity 650ms cubic-bezier(.37,0,.63,1);
}

html.failsafe .night-zenith {
  transition: opacity 850ms cubic-bezier(.37,0,.63,1) 150ms;
}

html.failsafe .shade {
  transition: opacity 750ms cubic-bezier(.37,0,.63,1) 575ms;
}


.page {
  padding: var(--section-padding) var(--margin-right) var(--section-padding) var(--margin-left);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .page > .grid {
    max-width: 1800px;
    margin-inline: auto;
  }
}

.section-title {
  grid-column: 1 / -1;
  font: 760 var(--size-l)/.95 var(--font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
}

.item-title {
  font: 760 var(--size-item)/1.08 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.meta {
  font: var(--type-small);
  color: var(--ink-2);
  font-variant-numeric: lining-nums proportional-nums;
}

.item-title + .meta {
  margin-top: .45rem;
}

.prose {
  max-width: 33em;
}

.prose p + p {
  margin-top: .85em;
}

.list {
  list-style: none;
  max-width: 34em;
}

.list li {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.list li + li {
  margin-top: .55em;
}

.list li::before {
  content: "\2013";
  content: "\2013" / "";
  display: inline-block;
  width: 1.1em;
  text-indent: 0;
  color: var(--ink-2);
}

.meta + .list {
  margin-top: 1.1rem;
}

sup.note-ref {
  font: 600 .62em/0 var(--font-sans);
  color: var(--cobalt);
  vertical-align: .55em;
  margin-left: .04em;
  font-variant-numeric: lining-nums;
}

sup.note-ref a {
  padding-inline: .2em;
  margin-inline: -.2em;
  text-decoration: none;
}

@media (max-width: 37.49rem) {
  .prose p,
  .list li,
  .project .summary {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

.prose p,
.standfirst {
  hanging-punctuation: first allow-end last;
}


.toc-column {
  grid-column: 1 / -1;
}

.toc {
  list-style: none;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 3.25rem);
}

.toc li + li {
  margin-top: .35em;
}

.toc li:first-child {
  margin-bottom: .45em;
}

.toc li:first-child a {
  font-size: var(--size-lead);
  line-height: 1.04;
  letter-spacing: -.015em;
}

.toc a {
  font: 760 var(--size-toc)/1.12 var(--font-display);
  letter-spacing: -.01em;
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
  text-decoration-thickness: .06em;
  text-underline-offset: .15em;
}


.editor {
  grid-column: 1 / -1;
  margin-top: clamp(4rem, 3rem + 4vw, 6rem);
}

.portrait {
  width: 78%;
  margin-left: auto;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--lavender);
}

.portrait figcaption {
  font: var(--type-small);
  color: var(--ink-2);
  margin-top: .6rem;
}

.letter-headline {
  font: 760 var(--size-lead)/1.04 var(--font-display);
  letter-spacing: -.012em;
  margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 1.1rem;
  max-width: 15em;
  text-wrap: balance;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .editor {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .portrait {
    width: auto;
    grid-column: 1 / 5;
    margin: 0;
  }

  .letter {
    grid-column: 5 / 9;
  }

  .letter-headline {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .toc-column {
    grid-column: 1 / 7;
    align-self: start;
    position: sticky;
    top: 2.5rem;
  }

  .js .toc-column {
    top: min(2.5rem, calc(var(--vh) * 100 - var(--sticky-height, 0px) - 1rem));
  }

  .editor {
    grid-column: 7 / 13;
    padding-left: var(--right-page-inset);
    margin-top: 0;
  }

  .portrait {
    width: 100%;
    margin: 0;
    max-width: min(46rem, calc(var(--vh) * 72));
  }
}


.feature {
  display: grid;
  grid-template-columns: 1fr;
}

.feature-panel {
  background: var(--cobalt);
  color: var(--cover-ink);
  padding: var(--section-padding) var(--margin-right) clamp(2.5rem, 2rem + 2vw, 4rem) var(--margin-left);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 2rem + 4vw, 6rem);
}

.feature-panel a {
  color: inherit;
}

.feature-panel :focus-visible {
  outline-color: var(--cover-ink);
}

.feature-panel ::selection {
  background: var(--cover-ink);
  color: var(--cobalt);
}

.feature-title {
  font: 760 var(--size-xl)/.9 var(--font-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}

.standfirst {
  font: italic 400 var(--size-standfirst)/1.3 var(--font-text);
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  max-width: 21em;
  text-wrap: pretty;
}

.dateline {
  font: var(--type-small);
  font-variant-numeric: lining-nums;
}

.feature-copy {
  padding: var(--section-padding) var(--margin-right) var(--section-padding) var(--margin-left);
}

/* The masthead subset has the I for this drop cap. */
.feature-copy .prose > p:first-child::first-letter {
  font: 760 3.55em/.8 var(--font-masthead);
  float: left;
  margin: .08em .08em 0 -.02em;
}

/* The drop cap is the word "I": a word space after it. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .feature-copy .prose > p:first-child::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-size: inherit;
    line-height: inherit;
    float: none;
    margin: 0 .3em 0 0;
  }
}

/* Chromium leaves the space beside an initial letter out of copied text; this one is kept and takes no room. */
.drop-space {
  white-space: pre;
  font-size: 0;
}

.notes {
  list-style: none;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font: var(--type-small);
  color: var(--ink-2);
  max-width: 34rem;
}

.notes li {
  display: grid;
  grid-template-columns: 1.5em 1fr;
}

.notes li + li {
  margin-top: .5rem;
}

.note-mark {
  font-weight: 600;
  color: var(--cobalt);
  font-variant-numeric: lining-nums;
}

@media (min-width: 1024px) {
  .feature {
    grid-template-columns: 1fr 1fr;
  }

  .feature-panel {
    position: sticky;
    top: 0;
    min-height: calc(var(--vh) * 100);
    align-self: start;
  }

  .js .feature-panel {
    top: min(0px, calc(var(--vh) * 100 - var(--sticky-height, 0px)));
  }

  .feature-copy {
    align-self: center;
  }
}

@media (min-width: 1024px) and (max-height: 55.99rem) {
  html:not(.js) .toc-column,
  html:not(.js) .feature-panel {
    position: static;
  }
}


.job-row {
  display: grid;
  margin-top: clamp(2.75rem, 2rem + 3vw, 5.5rem);
  row-gap: clamp(3.5rem, 3rem + 2vw, 5rem);
  column-gap: calc(var(--gutter) * 2);
}

.job-title {
  font: 760 var(--size-item)/1.08 var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.job .meta {
  margin-top: .45rem;
}

.job .list {
  margin-top: 1rem;
  max-width: 34em;
}

@media (min-width: 900px) {
  .job-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1800px) {
  .experience > .section-title,
  .experience > .job-row {
    max-width: 1800px;
    margin-inline: auto;
  }
}


.project-list {
  grid-column: 1 / -1;
  list-style: none;
  display: grid;
  gap: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  margin-top: clamp(2.75rem, 2rem + 3vw, 5.5rem);
}

.project .summary {
  max-width: 34em;
  margin-top: 1rem;
}

.project .link,
.job .link {
  font: 600 clamp(.9375rem, .9rem + .15vw, 1.0625rem)/1.3 var(--font-sans);
  margin-top: 1rem;
}

.project .link a,
.job .link a {
  color: var(--cobalt);
  text-decoration-thickness: .1em;
  text-underline-offset: .22em;
}

.job,
.project {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

@media (min-width: 700px) {
  .project-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gutter) * 2);
  }
}


.back-cover {
  container-type: inline-size;
  position: relative;
  background: var(--night);
  color: var(--cover-ink);
  overflow: hidden;
  overflow: clip;
  --cover-width: 100cqw;
}

@supports not (width: 1cqw) {
  .back-cover {
    --cover-width: 100vw;
  }
}

.back-cover a {
  color: var(--night-link);
}

.back-cover :focus-visible {
  outline-color: var(--cover-ink);
}

.night-photo {
  position: relative;
  height: max(calc(var(--vh) * 100), 34rem);
}

.night-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  background: var(--night);
}

.night-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .28) 22%, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .92) 92%, #000);
}

/* LEUNG's ink ends 2.841em along; its cap top is .1945em below the line box. */
.back-masthead {
  position: absolute;
  z-index: 1;
  left: var(--margin-left);
  top: calc(env(safe-area-inset-top, 0px) + var(--vh) * 7);
  margin-top: -.1945em;
  font: 760 calc((var(--cover-width) - var(--margin-left) - var(--margin-right)) / 2.84)/1 var(--font-masthead);
  letter-spacing: -.005em;
}

@media (min-aspect-ratio: 1/1) {
  .night-photo img {
    object-position: 66% 50%;
  }

  .back-masthead {
    font-size: min(calc((var(--cover-width) * .58 - var(--margin-left) - var(--margin-right)) / 2.84), calc(var(--vh) * 28));
  }
}

.correspondence {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--vh) * -24);
  padding: 0 var(--margin-right) max(clamp(3rem, 2rem + 3vw, 6rem), env(safe-area-inset-bottom, 0px)) var(--margin-left);
}

.contact-title {
  font: 760 var(--size-item)/1.1 var(--font-display);
  letter-spacing: -.01em;
}

/* The address is 7.9em wide; it shrinks to fit narrow or zoomed screens and wraps under wider text spacing. */
.email-address {
  display: inline-block;
  margin-top: clamp(.75rem, .5rem + 1vw, 1.5rem);
  font: 760 clamp(2rem, .9rem + 4.6vw, 6.25rem)/1 var(--font-display);
  font-size: min(clamp(2rem, .9rem + 4.6vw, 6.25rem), calc((var(--cover-width) - var(--margin-left) - var(--margin-right)) / 8.2));
  overflow-wrap: anywhere;
  letter-spacing: -.02em;
  text-decoration-thickness: .035em;
  text-underline-offset: .12em;
}

.elsewhere {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  margin-top: 1.5rem;
  font: 450 var(--cover-small)/1.3 var(--font-sans);
}

.elsewhere a {
  display: inline-block;
  padding: .6rem 0;
}

.colophon {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid;
  gap: .5rem;
  font: var(--type-small);
  color: var(--night-ink-2);
  max-width: 44rem;
}

@media (min-width: 1024px) {
  .colophon {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
    max-width: none;
  }
}


@media print {
  @page {
    size: letter;
    margin: 18mm 16mm 20mm;
  }

  html,
  body {
    background: #fff;
    color: #000;
    font-size: 10.5pt;
  }

  .skip-link,
  .sky-plate,
  .night-plate,
  .night-zenith,
  .cutout,
  html:is(.intro, .dawn) .shade,
  .cover-height-probe,
  .cover-sizer,
  .cover-lines,
  .stacked .cover-lines,
  .email-link,
  .resume-link,
  .cover-name,
  .portrait,
  .night-photo img,
  .night-photo::after,
  .back-masthead,
  .toc-column {
    display: none;
  }

  .cover {
    height: auto;
    overflow: visible;
    background: none;
    color: #000;
    padding: 0 0 6mm;
    container-type: normal;
  }

  .stage {
    position: static;
    translate: none;
    width: auto;
    height: auto;
    margin: 0;
  }

  .masthead {
    position: static;
    inset: auto;
    translate: none;
    text-align: left;
    font-size: 44pt;
    color: #000;
    text-transform: uppercase;
  }

  .masthead .visually-hidden {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    overflow: visible;
  }

  .cover-text,
  .cover-top {
    position: static;
    display: block;
    padding: 0;
    height: auto;
    container-type: normal;
  }

  .strap {
    position: static;
    width: auto;
    color: #000;
    margin-top: 2mm;
  }

  .strap-segment {
    display: block;
    white-space: normal;
    margin-right: 0;
  }

  .page,
  .feature-copy {
    padding: 6mm 0;
  }

  .feature {
    display: block;
  }

  .feature-panel {
    background: none;
    color: #000;
    min-height: 0;
    position: static;
    padding: 6mm 0 0;
    gap: 3mm;
  }

  .back-cover {
    background: none;
    color: #000;
    container-type: normal;
  }

  .night-photo {
    height: auto;
  }

  .correspondence {
    margin: 0;
    padding: 6mm 0;
  }

  .email-address {
    font-size: 18pt;
  }

  .colophon {
    color: #000;
    display: block;
    margin-top: 4mm;
  }

  .editor {
    display: block;
  }

  .editor,
  .letter-headline {
    margin-top: 0;
  }

  .notes {
    break-inside: avoid;
  }

  .elsewhere a {
    padding: 0;
  }

  .section-title,
  .letter-headline,
  .feature-title,
  .contact-title {
    font-size: 20pt;
    line-height: 1.05;
  }

  .job-row,
  .project-list {
    display: block;
  }

  .job + .job,
  .project + .project {
    margin-top: 6mm;
  }

  .item-title,
  .toc a {
    font-size: 13pt;
  }

  h2,
  h3,
  h4,
  .meta {
    break-after: avoid;
    break-inside: avoid;
  }

  .project,
  .list li {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font: 400 8pt/1.2 var(--font-sans);
    color: #000;
    overflow-wrap: anywhere;
  }

  a[href$=".pdf"]::after {
    content: " (jamesleung.me/" attr(href) ")";
    font: 400 8pt/1.2 var(--font-sans);
  }

  a {
    color: #000;
    text-decoration: none;
  }
}


@media (prefers-contrast: more) {
  :root {
    --cover-ink: #FFFFFF;
    --ink-2: #000000;
    --hairline: rgb(0 0 0 / .5);
    --night-ink-2: #E6E6E6;
  }

  a,
  a:hover,
  .email-address {
    text-decoration-thickness: 2px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: text-decoration-thickness .12s linear;
  }
}