/* ==========================================================================
   Kimi Fleming — site styles

   Sizes come from the original wireframe, which is 1920px wide.
   1 "u" = 1px on that wireframe. The page scales with the window, so
   calc(30 * var(--u)) means "30px on the wireframe" at any screen size.
   ========================================================================== */

/* ---------- Fonts ----------
   The wireframe uses Franklin Gothic Medium Condensed and Minion Pro. Those are
   used when a visitor has them installed; otherwise the stand-ins in /fonts load
   (see fonts/README.txt). To serve the real fonts to everyone, add them as web
   fonts and put their names first in --font-display / --font-body below. */
@font-face {
  font-family: "KF Gothic Condensed";
  src: url("../fonts/kf-gothic-condensed-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
  src: url("../fonts/crimson-text-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; size-adjust: 102%;
}
@font-face {
  font-family: "Crimson Text";
  src: url("../fonts/crimson-text-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; size-adjust: 102%;
}
@font-face {
  font-family: "Crimson Text";
  src: url("../fonts/crimson-text-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; size-adjust: 102%;
}
/* optional faces for the name on the home page (heroNameFont in site-content.js) */
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Pacifico"; src: url("../fonts/pacifico-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-bold-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --u: calc(min(100vw, 2560px) / 1920);

  --font-display: "Franklin Gothic Medium Cond", "KF Gothic Condensed", "Arial Narrow", sans-serif;
  --font-body: "Minion Pro", "Crimson Text", Georgia, serif;

  /* type sizes (wireframe px), with a floor so nothing gets too small */
  --fs-nav:   max(13px, calc(30 * var(--u)));
  --fs-name:  max(44px, calc(96 * var(--u)));
  --fs-sub:   max(18px, calc(36 * var(--u)));
  --fs-title: max(28px, calc(48 * var(--u)));
  --fs-body:  max(17px, calc(24 * var(--u)));
  --fs-link:  max(15px, calc(24 * var(--u)));
  --fs-small: max(13px, calc(20 * var(--u)));

  /* spacing */
  --edge:   max(16px, calc(40 * var(--u)));   /* nav margin, left and right */
  --gutter: max(14px, calc(36 * var(--u)));   /* portfolio grid margin, left and right */
  --gap:    max(8px,  calc(20 * var(--u)));   /* space between video tiles */

  /* colours */
  --ink: #000;
  --paper: #fff;
  --muted: #5c5c5c;
  --line: rgba(0, 0, 0, .16);
  --video-placeholder: #17171a;   /* shows for a moment while a video's still image loads */
  --accent: #f2609f;              /* her pink: the outline a video tile gets when pointed at */
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.35 var(--font-body);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
ul { list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.page { max-width: 2560px; margin: 0 auto; }

/* small all-caps links such as "View More..." */
.text-link {
  font: 500 var(--fs-link)/1 var(--font-display);
  text-transform: uppercase; white-space: nowrap;
  transition: opacity .2s;
}
.text-link:hover { color: var(--accent); }

/* ---------- Nav ---------- */
.nav {
  display: flex; justify-content: space-between; align-items: baseline;
  max-width: 2560px; margin: 0 auto;
  padding: var(--edge) var(--edge) 0;
  font: 500 var(--fs-nav)/1 var(--font-display);
  text-transform: uppercase;
}
.nav__group { display: flex; gap: max(10px, calc(32 * var(--u))); }
.nav a { white-space: nowrap; transition: opacity .2s; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .28em; }

/* ---------- Hero: full-screen looping video, name, scroll arrow ---------- */
.hero {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 320px;
  background: #0d0d0f;
  color: #fff;
}
/* the background video (videos/hero.mp4); its opening picture shows until it starts */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a light veil over the whole picture, darker towards the top so the menu stays readable */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 50%), rgba(0, 0, 0, .2);
}
.hero .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.hero .nav, .hero__title { text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }

/* name baseline sits 44% down the hero, subtitle 57u below it, as on the wireframe */
.hero__title {
  position: absolute; left: 0; right: 0; top: 44.92%; z-index: 1;
  transform: translateY(-50%);
  padding: 0 var(--edge);
  text-align: center;
  font-family: var(--font-display); font-weight: 500;
}
.hero__title h1 { font-size: var(--fs-name); line-height: 1; font-weight: inherit; margin-bottom: .36em; text-transform: uppercase; letter-spacing: .02em; }
.hero__title p  { font-size: var(--fs-sub);  line-height: 1; text-wrap: balance; text-transform: uppercase; letter-spacing: .06em; }
/* the other ways the name can be written (chosen with heroNameFont in site-content.js);
   the two handwritten ones keep normal letters, capitals don't suit them */
.hero__title[data-font="fraunces"] h1 { font: 400 max(42px, calc(96 * var(--u)))/1 "Fraunces", Georgia, serif; letter-spacing: .06em; }
.hero__title[data-font="playfair"] h1 { font: italic 700 max(42px, calc(92 * var(--u)))/1 "Playfair Display", Georgia, serif; letter-spacing: .03em; }
.hero__title[data-font="caveat"] h1 { font: 700 max(56px, calc(130 * var(--u)))/.9 "Caveat", cursive; text-transform: none; letter-spacing: 0; margin-bottom: .18em; }
.hero__title[data-font="pacifico"] h1 { font: 400 max(44px, calc(92 * var(--u)))/1.1 "Pacifico", cursive; text-transform: none; letter-spacing: 0; margin-bottom: .22em; }

/* scroll arrow: small, semi-transparent, pulsing; click jumps to the next block */
.hero__scroll {
  position: absolute; left: 50%; bottom: max(8px, calc(28 * var(--u) - 14px)); z-index: 2;
  transform: translateX(-50%);
  padding: 14px;
  line-height: 0;
}
.hero__scroll svg {
  display: block;
  width: max(28px, calc(44 * var(--u))); height: auto; overflow: visible;
  fill: none; stroke: var(--accent); stroke-width: 3;
  opacity: .5;
  animation: arrow-pulse 2.4s ease-in-out infinite;
}
.hero__scroll:hover svg { animation-play-state: paused; opacity: 1; }
@keyframes arrow-pulse {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(max(3px, calc(6 * var(--u)))); }
}

/* ---------- Section titles ---------- */
.section-title {
  font: 500 var(--fs-title)/1 var(--font-display);
  text-transform: uppercase; text-align: center;
}
.section-title::after { content: ""; display: block; width: max(28px, calc(48 * var(--u))); height: 3px; margin: .4em auto 0; background: var(--accent); }
::selection { background: var(--accent); color: #fff; }
.section-title__link { transition: opacity .2s; }
.section-title__link:hover { color: var(--accent); }

/* ---------- Portfolio ---------- */
/* the heading sits in the middle of the white space between the hero and the videos */
/* the heading sits in the middle of the white space between the hero and the videos */
.portfolio { padding: calc(50 * var(--u)) var(--gutter) 0; }
.portfolio__head { position: relative; margin-bottom: calc(44 * var(--u)); }
.portfolio > .grid { width: 100%; }     /* full width unless js/site.js sets a narrower one (then margin auto centres it) */
.portfolio__more { display: block; width: max-content; margin: max(12px, calc(14 * var(--u))) auto 0; }

/* The grid is 6 narrow columns and half-height rows so tiles can be regular (2 x 2),
   large (4 x 4), tall (2 x 6) or full width while playing. js/site.js places each tile. */
.grid {
  --row: calc((339 * var(--u) - var(--gap)) / 2);
  display: grid; gap: var(--gap); margin-inline: auto;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: var(--row);
}
.grid__note { grid-column: 1 / -1; padding: 2em 0; text-align: center; color: var(--muted); }
.grid__ghost {            /* holds a video's place in the grid while it plays full width */
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--video-placeholder) center / cover no-repeat;
}
.grid__ghost::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.grid__ghost::after {
  content: "Now playing"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font: 500 var(--fs-link)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- Video ----------
   A tile shows a still image. Pointing at it fades in a short silent clip (a small file
   in videos/previews). Clicking plays the full video from YouTube: that player sits behind
   an invisible button, is taller than the tile so YouTube's title and logo are cut off,
   and is only shown once it has a picture. js/site.js sets the player's size. */
.video {
  position: relative; overflow: hidden;
  background: var(--video-placeholder) center / cover no-repeat;
  --pic-w: 100%; --pic-h: 100%;
}
/* a pink outline while a tile is pointed at (not while it is playing) */
.video::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--accent); transition: box-shadow .2s;
}
.video:hover:not(.is-active)::after, .video:focus-within:not(.is-active)::after { box-shadow: inset 0 0 0 4px var(--accent); }
.video__preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.video.is-previewing > .video__preview { opacity: 1; }
.video__stage { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.video.is-live > .video__stage { opacity: 1; }
.video__clip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; }
.video__player { position: absolute; left: 50%; top: 50%; }
.video__player iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }

/* everything a visitor can see or press sits in a box the size of the visible picture */
.video__screen {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: var(--pic-w); height: var(--pic-h); transform: translate(-50%, -50%);
  color: #fff;
}
.video__toggle {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.video__toggle:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 7px rgba(0, 0, 0, .5); }

/* title: shown when a tile is pointed at (always shown on touch screens) */
.video__title {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6em max(12px, calc(18 * var(--u))) max(10px, calc(15 * var(--u)));
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  font: 500 var(--fs-link)/1.15 var(--font-display);
  text-wrap: balance;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.video__title span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.video:hover .video__title, .video:focus-within .video__title { opacity: 1; }
.video.is-active .video__title { opacity: 0; }

/* round icon in the middle: play while paused; it also sits over YouTube's own button for
   the first few seconds after a video starts */
.video__badge {
  --size: max(68px, calc(var(--yt-button, 56px) * 1.3));
  position: absolute; left: 50%; top: 50%;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(17, 17, 17, .92);
  opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s, transform .25s; pointer-events: none;
}
.video__badge svg { grid-area: 1 / 1; width: 30px; height: 30px; fill: currentColor; }
.video__badge .icon-play { margin-left: 3px; }
.video__badge .icon-pause { display: none; }
.video.is-paused .video__badge, .video.is-settling .video__badge { opacity: 1; transform: translate(-50%, -50%); }
.video.is-active:not(.is-paused) .video__badge .icon-pause { display: block; }
.video.is-active:not(.is-paused) .video__badge .icon-play { display: none; }

/* buttons */
.video__btn {
  flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: none; color: inherit; cursor: pointer;
  transition: background .15s, opacity .25s;
}
.video__btn:hover { background: rgba(255, 255, 255, .2); }
.video__btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.video__btn svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: currentColor; }
.video__btn .icon-off, .video.is-muted .video__btn--mute .icon-on,
.video.is-fullscreen .video__btn--fs .icon-on { display: none; }
.video.is-muted .video__btn--mute .icon-off, .video.is-fullscreen .video__btn--fs .icon-off { display: block; }
.video__btn--play .icon-play, .video.is-paused .video__btn--play .icon-pause { display: none; }
.video.is-paused .video__btn--play .icon-play { display: block; }

/* minimize: the little arrows in the top right corner of the video that is playing */
.video__min { position: absolute; top: 12px; right: 12px; display: none; background: rgba(0, 0, 0, .5); opacity: 0; }
.video__min:hover { background: rgba(0, 0, 0, .8); }
.video.is-active .video__min { display: grid; }
.video.is-active.is-ui-visible .video__min, .video.is-active.is-paused .video__min, .video__min:focus-visible { opacity: 1; }
.video.is-fullscreen .video__min { display: none; }

/* control bar (only on the video that is playing): play/pause, time, scrub line, sound, full screen */
.video__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: none; align-items: center; gap: 4px;
  padding: 44px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  opacity: 0; transition: opacity .25s;
}
.video.is-active .video__bar { display: flex; }
.video.is-active.is-ui-visible .video__bar, .video.is-active.is-paused .video__bar, .video.is-active .video__bar:focus-within { opacity: 1; }
.video.is-active:not(.is-ui-visible):not(.is-paused) .video__toggle { cursor: none; }
.video__time { font: 500 15px/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; margin: 0 10px 0 2px; }
.video__progress { position: relative; flex: 1; height: 26px; cursor: pointer; touch-action: none; }
.video__progress::before, .video__progress::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
}
.video__progress::before { right: 0; background: rgba(255, 255, 255, .32); }
.video__progress::after  { width: calc(var(--progress, 0) * 100%); background: var(--accent); }
.video__progress i {       /* scrub handle */
  position: absolute; top: 50%; left: calc(var(--progress, 0) * 100%);
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent);
  transform: scale(0); transition: transform .15s;
}
.video__progress:hover i, .video__progress:focus-visible i, .video__progress.is-dragging i { transform: none; }

/* playing: the tile becomes exactly the shape of its picture (js/site.js sets its size), so
   there are no black bars, and gets a row of its own: wide videos fill the width of the
   page, vertical ones the height of the window. */
.video.is-expanded { justify-self: start; align-self: center; }
.video.is-fullscreen { background: #000; background-image: none !important; }
.video.is-pseudo-fullscreen { position: fixed; inset: 0; z-index: 1000; width: 100vw !important; height: 100vh !important; height: 100dvh !important; }
html.has-pseudo-fullscreen { overflow: hidden; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

/* ---------- About (home page): intro on the left, headshot on the right ---------- */
.about {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding-top: calc(44 * var(--u));
}
.about__text { justify-self: center; max-width: 31em; padding: 0 var(--gutter); text-align: center; }
.about__text p { text-wrap: pretty; }
.about__text p + p { margin-top: .9em; }
.about__links { display: flex; justify-content: center; gap: max(18px, calc(44 * var(--u))); margin-top: 1.5em; }
.about__hello { margin-bottom: .45em; font: 500 max(30px, calc(56 * var(--u)))/1 var(--font-display); }
.about__hello a { transition: opacity .2s; }
.about__hello a:hover { color: var(--accent); }
.about__photo {
  justify-self: center;
  width: calc(618 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background: #d9dde3; overflow: hidden;
  outline: 3px solid var(--accent); outline-offset: 6px;       /* a thin pink ring around the headshot */
}
/* on the home page the blurb and the photo sit side by side in the middle of the page; the
   photo is the whole (square) picture, uncropped, with no ring */
.about:not(.about--page) { grid-template-columns: auto auto; justify-content: center; column-gap: max(24px, calc(70 * var(--u))); }
.about:not(.about--page) .about__text { max-width: 27em; padding: 0; }
.about:not(.about--page) .about__photo { width: max(220px, calc(440 * var(--u))); aspect-ratio: 1; border-radius: 14px; outline: 0; }
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact band (bottom of every page): a short line of links ---------- */
.contact {
  margin-top: calc(110 * var(--u));
  padding: max(30px, calc(54 * var(--u))) var(--gutter) max(20px, calc(30 * var(--u)));
  background: #0d0d0f; color: #fff; text-align: center;
}
.contact__title { font: 500 max(20px, calc(32 * var(--u)))/1 var(--font-display); text-transform: uppercase; }
.contact__links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .7em max(24px, calc(64 * var(--u)));
  margin-top: max(16px, calc(26 * var(--u)));
  font: 500 var(--fs-link)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em;
}
.contact__links a, .contact__ways a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s;
}
.contact__links a:hover, .contact__links a:focus-visible, .contact__ways a:hover, .contact__ways a:focus-visible { background-size: 100% 1px; color: var(--accent); }
.contact__fine { margin-top: max(22px, calc(40 * var(--u))); font: 500 var(--fs-small)/1 var(--font-display); letter-spacing: .04em; opacity: .5; }

/* the Contact page: the details themselves, with a friendly label over each */
.contact__ways { display: flex; text-align: center; font-size: var(--fs-body); line-height: 1.2; }
.contact__label { font: 500 .92em/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
/* the Contact page itself: the same details, larger, with a friendlier label over each */
.contact--plain { margin-top: 0; padding-top: calc(30 * var(--u)); background: none; color: inherit; }
.contact__ways--page {
  display: flex; flex-direction: row; align-items: flex-start; flex-wrap: wrap; text-align: center;
  gap: max(26px, calc(44 * var(--u))) max(40px, calc(110 * var(--u)));
  margin-top: max(26px, calc(50 * var(--u)));
}
.contact__ways--page .contact__label { display: block; margin-bottom: .55em; font-size: var(--fs-small); letter-spacing: .08em; text-align: center; }
.contact__ways--page a { font-size: max(20px, calc(36 * var(--u))); line-height: 1.1; }

/* ---------- Other pages ---------- */
.nav--page { display: grid; grid-template-columns: 1fr auto 1fr; padding-bottom: var(--edge); }
.nav--page .nav__group:last-child { justify-self: end; }
.subpage__main { padding: calc(40 * var(--u)) var(--gutter) 0; min-height: 46vh; }
.subpage__main > .section-title { margin-bottom: calc(60 * var(--u)); }
.subpage__intro { max-width: 34em; margin: calc(-34 * var(--u)) auto calc(60 * var(--u)); text-align: center; color: var(--muted); }

/* Resume: section name on the left, details on the right */
.cv { max-width: calc(1320 * var(--u)); margin: 0 auto; }
.cv__section {
  display: grid; grid-template-columns: calc(300 * var(--u)) 1fr; column-gap: calc(40 * var(--u));
  padding: calc(44 * var(--u)) 0; border-top: 1px solid var(--line);
}
.cv__section:first-child { border-top: 0; padding-top: 0; }
.cv__heading { font: 500 max(20px, calc(30 * var(--u)))/1.1 var(--font-display); text-transform: uppercase; }
.cv__job + .cv__job { margin-top: calc(46 * var(--u)); }
.cv__job-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 20px; }
.cv__role { font: 500 max(20px, calc(30 * var(--u)))/1.15 var(--font-display); }
.cv__dates { font: 500 var(--fs-small)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.cv__place { font-style: italic; color: var(--muted); margin: .1em 0 .6em; }
.cv ul.cv__points { margin-top: .6em; }
.cv__points li { position: relative; padding-left: 1.15em; }
.cv__points li + li { margin-top: .35em; }
.cv__points li::before { content: "\2022"; position: absolute; left: .15em; }
.cv__list li + li { margin-top: .5em; }
.cv__list b, .cv__skills dt { font: 500 1em/1.2 var(--font-display); letter-spacing: .01em; }
.cv__skills { display: grid; grid-template-columns: max-content 1fr; gap: .55em calc(28 * var(--u)); }
.cv__skills dt { text-transform: uppercase; font-size: var(--fs-small); letter-spacing: .06em; color: var(--muted); padding-top: .32em; }

/* Awards: four headline cards in a row, then one block per contest laid out like the
   resume (who gave the awards on the left, the awards on the right, one per line) */
.honors {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gap);
  max-width: calc(1700 * var(--u)); margin: 0 auto;
}
.honor {                   /* the four lines of every card line up across the row */
  display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start;
  padding: calc(34 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u));
  background: #0d0d0f; color: #fff;
}
.honor__year { font: 500 var(--fs-small)/1 var(--font-display); letter-spacing: .1em; opacity: .6; }
.honor__name { margin: .5em 0 .4em; font: 500 max(24px, calc(40 * var(--u)))/1.05 var(--font-display); text-wrap: balance; }
.honor__for { font: 500 var(--fs-link)/1.25 var(--font-display); text-wrap: pretty; }
.honor__for i { font: italic 400 var(--fs-body)/1.3 var(--font-body); }
.honor__meta { align-self: end; padding-top: 1.6em; font-size: .82em; line-height: 1.35; opacity: .7; }

.awards { max-width: calc(1700 * var(--u)); margin: 0 auto; }
.awards__group {
  display: grid; grid-template-columns: calc(440 * var(--u)) 1fr; column-gap: calc(70 * var(--u));
  padding: calc(46 * var(--u)) 0; border-top: 1px solid var(--line);
}
.awards__group:first-child { border-top: 0; padding-top: 0; }
.awards__org { font: 500 max(20px, calc(30 * var(--u)))/1.1 var(--font-display); text-transform: uppercase; text-wrap: balance; }
.awards__meta { margin-top: .6em; font: 500 var(--fs-small)/1.4 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.awards__rows li {
  display: grid; grid-template-columns: 8.4em minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 1.3em; align-items: baseline;
  padding: .5em 0; border-top: 1px solid rgba(0, 0, 0, .09);
}
.awards__rows li:first-child { border-top: 0; padding-top: 0; }
.awards__rows li:last-child { padding-bottom: 0; }
.awards__place { font: 500 var(--fs-small)/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.awards__what { font: 500 1.02em/1.25 var(--font-display); }
.awards__sub { display: block; margin-top: .15em; font: 500 var(--fs-small)/1.3 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.awards__story { font-style: italic; line-height: 1.3; }
.awards__story a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: opacity .2s; }
.awards__story a:hover { color: var(--accent); }
/* the notable ones sit on a soft grey panel of their own; a small heading introduces the rest */
.awards .awards__group--notable { position: relative; padding: calc(60 * var(--u)) 0; border-top: 0; }
.awards__group--notable .awards__org { padding-top: .15em; }
.awards__group--notable::before { content: ""; position: absolute; inset: 0 calc(-70 * var(--u)); z-index: -1; background: #fdf1f7; }   /* a pale wash of her pink */
.awards__group--notable .awards__what { font-size: 1.12em; }
.awards__group--notable .awards__rows li { padding: .7em 0; border-top-color: rgba(0, 0, 0, .12); }
.awards__section {
  margin: calc(90 * var(--u)) 0 calc(14 * var(--u));
  font: 500 var(--fs-small)/1 var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); text-align: center;
}
.awards__section + .awards__group { border-top: 1px solid var(--line); }

/* Contact page: headshot on the left, four big ways to reach her on the right */
.reach {
  display: grid; grid-template-columns: calc(520 * var(--u)) 1fr; align-items: center; column-gap: calc(120 * var(--u));
  max-width: calc(1400 * var(--u)); margin: calc(-20 * var(--u)) auto 0;
}
.reach__photo { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #d9dde3; justify-self: end; outline: 3px solid var(--accent); outline-offset: 6px; }
.reach__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reach__way {
  display: grid; grid-template-columns: max(28px, calc(40 * var(--u))) 1fr; grid-template-rows: auto auto; column-gap: max(14px, calc(26 * var(--u)));
  padding: max(14px, calc(22 * var(--u))) 0; border-top: 1px solid var(--line);
  transition: color .2s;
}
.reach__way:last-child { border-bottom: 1px solid var(--line); }
.reach__way svg { grid-row: span 2; align-self: center; width: 100%; height: auto; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.reach__label { font: 500 var(--fs-small)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.reach__value { font-size: max(19px, calc(30 * var(--u))); line-height: 1.15; }
.reach__way:hover, .reach__way:focus-visible { color: var(--accent); }
.reach__way:hover .reach__label { color: var(--accent); }

/* About page: words in the middle, pictures around them in a ring (placed by js/site.js) */
.ring { position: relative; max-width: calc(1760 * var(--u)); margin: 0 auto; padding: calc(290 * var(--u)) calc(260 * var(--u)); }
.ring__words { position: relative; z-index: 1; max-width: 29em; margin: 0 auto; text-align: center; }
.ring__words p { text-wrap: pretty; }
.ring__words p + p { margin-top: .85em; }
.ring__face { width: calc(300 * var(--u)); margin: 0 auto 1em; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #d9dde3; }
.ring:not(.has-pictures) { padding-top: 0; padding-bottom: 0; }   /* no pictures yet: no room kept for them */
.ring:not(.has-pictures) .ring__face { margin-top: calc(-14 * var(--u)); }
.ring__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ring__instagram a { font-weight: 600; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.ring__pictures { position: absolute; inset: calc(110 * var(--u)) calc(100 * var(--u)); pointer-events: none; }   /* the oval runs along the edge of this box */
.ring__picture {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(200 * var(--u)); aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  transition: transform .25s; pointer-events: auto;
}
.ring__picture:hover, .ring__picture:focus-visible { transform: translate(-50%, -50%) rotate(0deg) scale(1.1); z-index: 2; }
.ring__picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

.notice {                  /* only appears when the page is opened straight from a file */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; padding: 10px 16px;
  background: #8c1d18; color: #fff; text-align: center; font: 500 15px/1.3 var(--font-display);
}

/* ---------- Fade in on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(max(12px, calc(24 * var(--u)))); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* touch screens have no "point at": always show titles, keep the bar up a little longer */
@media (hover: none) {
  .video__title { opacity: 1; }
}

@media (max-width: 1100px) {
  .reach { grid-template-columns: 1fr; row-gap: 30px; }
  .reach__photo { width: 220px; justify-self: center; }
  .ring { padding: 0 var(--gutter); }
  .ring__pictures { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; margin-top: 40px; }
  .ring__picture { position: static; width: 150px; transform: rotate(var(--tilt, 0deg)); }
  .ring__picture:hover, .ring__picture:focus-visible { transform: rotate(0deg) scale(1.08); }
  .honors { grid-template-columns: repeat(2, 1fr); row-gap: var(--gap); }
  .awards__rows li { grid-template-columns: 8.4em minmax(0, 1fr); }
  .awards__story { grid-column: 2; }
}

/* ---------- Phones: one column ---------- */
@media (max-width: 760px) {
  :root { --u: calc(100vw / 780); }
  .grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .grid .video { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 16 / 9; }
  .grid .video--tall { aspect-ratio: 9 / 16; }
  .grid__ghost, .video__min { display: none !important; }
  .video__time { font-size: 13px; margin-right: 4px; }
  .about, .about:not(.about--page) { grid-template-columns: 1fr; row-gap: calc(64 * var(--u)); }
  .about:not(.about--page) .about__text { padding: 0 var(--gutter); }
  .ring__face { width: 200px; }
  .ring__picture { width: 120px; }
  .contact__ways--page { flex-direction: column; align-items: center; }
  .reach { grid-template-columns: 1fr; row-gap: 30px; margin-top: 0; }
  .reach__photo { width: 180px; justify-self: center; }
  .contact__links { flex-direction: column; gap: 14px; }
  .nav--page { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px max(10px, calc(32 * var(--u))); }
  .nav__home { order: -1; flex-basis: 100%; text-align: center; }
  .cv__section { grid-template-columns: 1fr; row-gap: 14px; padding: 30px 0; }
  .cv__skills { grid-template-columns: 1fr; gap: 2px; }
  .cv__skills dd { margin-bottom: .7em; }
  .honors { grid-template-columns: 1fr; }
  .honor { padding: 24px 20px; }
  .awards { margin-top: 40px; }
  .awards__group--notable { padding: 26px 0; }
  .awards__group--notable::before { inset: 0 -14px; }
  .awards__section { margin: 44px 0 10px; }
  .awards__group { grid-template-columns: 1fr; row-gap: 16px; padding: 30px 0; }
  .awards__rows li { grid-template-columns: 1fr; }
  .awards__story { grid-column: 1; }
  .subpage__main > .section-title { margin-bottom: 34px; }
  .subpage__intro { margin: -14px auto 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__scroll svg { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}