@font-face {
  font-family: "Tinos";
  src: url("/assets/fonts/Tinos-Regular-Latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
}
html {
  min-width: 20rem;
}

a {
  color: var(--link);
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.08em;
}

a,
iframe,
textarea,
button {
  scroll-margin-block: 1rem;
}

a:visited {
  color: var(--link-visited);
}

a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 0.1875rem;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-skip: none;
  text-decoration-skip: none;
}

a:active {
  color: var(--link-active);
}

a:focus {
  outline: 3px solid transparent;
  color: var(--focus-ink);
  background: var(--focus);
  box-shadow: 0 -2px var(--focus), 0 4px var(--focus-ink);
  text-decoration: none;
}

.nav-link:visited:not(:hover, :active, :focus) {
  color: var(--link);
}

.parent-directory {
  position: relative;
  min-height: 24px;
  margin: 1rem 0 0;
}

.parent-directory .nav-link::before {
  position: absolute;
  right: 0;
  bottom: 0;
  width: max(24px, 100%);
  height: 24px;
  content: "";
}

.page-footer {
  display: grid;
  width: max-content;
  grid-template-columns: var(--title-column-width) var(--date-column-width);
  align-items: end;
}

.page-footer > .parent-directory {
  min-width: 0;
}

#current-date {
  white-space: pre;
}

.current-date-visible {
  position: relative;
  display: inline-block;
}

.current-weekday {
  position: absolute;
  right: 100%;
  width: max-content;
  text-align: right;
}

.visually-hidden,
.table-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (forced-colors: active) {
  a:focus,
  iframe:focus,
  textarea:focus,
  .command-output:focus {
    outline-color: Highlight;
  }
}

@media (max-width: 38rem) {
  :root {
    --mobile-browser-bottom-offset: 0px;
    --mobile-bottom-margin:
      max(
        16px,
        calc(
          env(safe-area-inset-bottom, 0px)
          + var(--mobile-browser-bottom-offset)
        )
      );
  }

  :root.instagram-in-app {
    --mobile-browser-bottom-offset: 16px;
  }

  html {
    overflow: hidden;
  }

  .page-footer {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) var(--date-column-width);
  }

  #current-date {
    text-align: right;
  }
}

:root {
  color-scheme: only light;
  --link: #003078;
  --link-hover: #0f385c;
  --link-visited: #54319f;
  --link-active: #0b0c0c;
  --focus: #ffdd00;
  --focus-ink: #0b0c0c;
  --title-column-width: 18rem;
  --date-column-width: 8.5rem;
  --desktop-bottom-margin: 4rem;
  --desktop-page-footer-height: 2.5rem;
}

html {
  background: #FAFAFA;
}

body {
  min-height: calc(100svh - 8px - var(--desktop-bottom-margin));
  margin: 8px 8px var(--desktop-bottom-margin);
  color: #000;
  background: #FAFAFA;
  font-family: "Tinos", "Times New Roman", Times, serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

h1,
h2 {
  font-weight: 400;
}

main {
  display: flex;
  width: 100%;
  min-height: calc(100svh - 8px - var(--desktop-bottom-margin));
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.explorer-page {
  position: relative;
  padding-bottom: var(--desktop-page-footer-height);
  justify-content: flex-end;
}

.home-page .primary-navigation {
  margin-top: auto;
}

.home-scroll {
  display: contents;
}

.showreel-body {
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
}

.showreel-page {
  min-height: 100svh;
  justify-content: flex-start;
}

.showreel-player {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Reserve two footer zones so the centred player keeps an 8px gap. */
  width: min(100vw, 960px, calc(177.7778svh - 17.7778rem));
  height: min(56.25vw, 540px, calc(100svh - 10rem));
  transform: translate(-50%, -50%);
}

.showreel-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.showreel-player iframe:focus {
  outline: 3px solid #fff;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #000;
}

.showreel-footer {
  position: fixed;
  z-index: 1;
  bottom: var(--desktop-bottom-margin);
  left: 8px;
  color: #000;
  background: transparent;
}

.showreel-updated {
  margin: 0;
  white-space: pre;
}

.showreel-footer .page-footer {
  grid-template-columns:
    var(--title-column-width)
    var(--date-column-width)
    max-content;
}

.showreel-footer .parent-directory {
  margin: 0;
}

.explorer-page > .page-footer {
  position: absolute;
  bottom: 0;
  left: 0;
}

.index-scroll {
  width: max-content;
  max-width: min(64rem, calc(100vw - 16px));
  padding-bottom: 0.75rem;
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.explorer-page > .index-scroll {
  margin-top: auto;
}

.file-index {
  width: max-content;
  min-width: 26rem;
  border-collapse: collapse;
  font-size: 1rem;
  text-align: left;
}

.file-index th,
.file-index td {
  padding: 0.15rem 1.5rem 0.15rem 0;
  vertical-align: top;
  white-space: nowrap;
}

.file-index tbody th {
  font-weight: 400;
}

.file-index col.title-column {
  width: var(--title-column-width);
}

.file-index col.date-column {
  width: var(--date-column-width);
}

.file-index .title-cell {
  width: var(--title-column-width);
  min-width: var(--title-column-width);
  max-width: var(--title-column-width);
  white-space: normal;
}

.file-index .link-target-row .title-cell {
  position: relative;
  height: 24px;
}

.standalone-link-row {
  position: relative;
  min-height: 24px;
}

.link-target-row .standalone-link {
  position: relative;
}

.link-target-row .standalone-link::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: max(24px, 100%);
  height: 24px;
  transform: translateY(-50%);
  content: "";
}

.standalone-link-row .standalone-link::before {
  position: absolute;
  inset: 0;
  min-width: 24px;
  min-height: 24px;
  content: "";
}

.file-index .date-cell {
  width: var(--date-column-width);
  min-width: var(--date-column-width);
}

.date-cell time {
  white-space: pre;
}

.clientele-index {
  min-width: 48rem;
}

.personal-index {
  min-width: 31rem;
}

.project-notes {
  color: #000;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

abbr[title] {
  text-decoration: none;
}

.site-name {
  display: grid;
  width: max-content;
  margin: 1rem 0 0;
  grid-template-columns:
    var(--title-column-width)
    var(--date-column-width);
  align-items: end;
}

.weather-line,
.weather-status {
  display: flex;
  min-width: 0;
  align-items: baseline;
}

.weather-line {
  grid-column: 1;
}

#weather-temperature,
.weather-attribution {
  white-space: pre;
}

.site-name #current-date {
  grid-column: 2;
}

.weather-attribution {
  display: inline;
}

.weather-credit:link,
.weather-credit:visited {
  color: #000;
  text-decoration: none;
}

.weather-credit:hover {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 0.1875rem;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
  -webkit-text-decoration-skip: none;
  text-decoration-skip: none;
}

.weather-credit:active,
.weather-credit:focus {
  color: #000;
  text-decoration: none;
}

.about-content {
  max-width: 32rem;
}

.about-content .about-name {
  margin: 0 0 1.5rem;
}

.about-group {
  margin-bottom: 1.5rem;
}

.site-contact p,
.about-content p,
.about-content blockquote {
  margin: 0;
}

.site-contact {
  position: sticky;
  z-index: 1;
  top: 8px;
  flex: 0 0 auto;
  max-width: 32rem;
  background: #FAFAFA;
}

.about-page > .site-contact,
.explorer-page > .site-contact {
  margin-bottom: 1.5rem;
}

.showreel-contact {
  --showreel-contact-clearance: 8px;

  position: fixed;
  top: var(--showreel-contact-clearance);
  left: var(--showreel-contact-clearance);
  margin-bottom: 0;
  background: transparent;
}

.showreel-contact.is-measuring {
  visibility: hidden;
}

.about-quote {
  margin-top: 1.5em;
  margin-top: 1lh;
}

.home-page .visitor-count {
  margin: 0;
}

.about-quote h2 {
  margin: 0 0 1.5rem;
  font-size: 1em;
}

.about-quote blockquote,
.about-quote .quote-attribution {
  margin: 0;
}

.tools-navigation {
  margin-top: 1rem;
}

.about-navigation {
  margin-bottom: 1.9rem;
}

.about-page > .page-footer {
  margin-top: auto;
}

.work-navigation h2,
.tools-navigation h2 {
  margin: 0 0 0.5rem;
  font-size: 1em;
}

@media (min-width: 38.0625rem) {
  .site-contact,
  .about-content {
    max-width: var(--title-column-width);
  }
}

@media (max-width: 38rem) {
  :root {
    --mobile-footer-row-gap: 1.625rem;
  }

  body {
    min-height: calc(100svh - 16px - var(--mobile-bottom-margin));
    margin: 16px 16px var(--mobile-bottom-margin);
    font-size: 1.125rem;
    line-height: 1.55;
  }

  .viewport-shell-body {
    height: calc(100vh - 16px - var(--mobile-bottom-margin));
    height: calc(100svh - 16px - var(--mobile-bottom-margin));
    min-height: 0;
    overflow: hidden;
  }

  main {
    min-height: calc(100svh - 16px - var(--mobile-bottom-margin));
    min-width: 0;
  }

  .viewport-shell-body > main {
    height: 100%;
    min-height: 0;
  }

  .site-contact {
    top: 0;
  }

  .about-page > .site-contact {
    margin-bottom: 1.75rem;
    margin-bottom: 1lh;
  }

  .showreel-contact {
    --showreel-contact-clearance: 16px;
    top: var(--showreel-contact-clearance);
  }

  .home-scroll {
    display: flex;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .has-more-above,
  .has-more-below {
    --scroll-fade-depth: 2.5rem;
  }

  .has-more-above {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--scroll-fade-depth)
      );
    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--scroll-fade-depth)
      );
  }

  .has-more-below {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        #000 calc(100% - var(--scroll-fade-depth)),
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        #000 calc(100% - var(--scroll-fade-depth)),
        transparent 100%
      );
  }

  .has-more-above.has-more-below {
    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--scroll-fade-depth),
        #000 calc(100% - var(--scroll-fade-depth)),
        transparent 100%
      );
    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--scroll-fade-depth),
        #000 calc(100% - var(--scroll-fade-depth)),
        transparent 100%
      );
  }

  .home-page > .site-name,
  .about-page > .page-footer,
  .explorer-page > .page-footer {
    flex: 0 0 auto;
  }

  .about-scroll {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .explorer-page {
    padding-bottom: 0;
    justify-content: flex-start;
  }

  .explorer-page > .page-footer {
    position: static;
  }

  .explorer-page > .index-scroll {
    display: flex;
    min-height: 0;
    margin-top: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  .explorer-page > .index-scroll > .file-index {
    flex: none;
    margin-top: auto;
  }

  .showreel-footer {
    bottom: var(--mobile-bottom-margin);
    left: 16px;
    right: 16px;
    background: #FAFAFA;
  }

  .showreel-footer .page-footer {
    width: 100%;
    grid-template-areas:
      "updated updated"
      "parent current";
    grid-template-columns: minmax(0, 1fr) var(--date-column-width);
    row-gap: var(--mobile-footer-row-gap);
  }

  .showreel-footer .parent-directory {
    grid-area: parent;
  }

  .showreel-footer #current-date {
    grid-area: current;
  }

  .showreel-page {
    justify-content: center;
  }

  .showreel-player {
    position: static;
    width: 100vw;
    height: min(56.25vw, calc(100svh - 4rem));
    transform: none;
  }

  .file-index,
  .file-index tbody {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: inherit;
    line-height: inherit;
  }

  .home-page .work-navigation,
  .home-page .tools-navigation {
    width: 100%;
  }

  .home-page .primary-navigation {
    width: 100%;
  }

  .home-page .about-navigation {
    margin-bottom: 2.25rem;
    margin-bottom: 1.25lh;
  }

  .home-page .tools-navigation {
    margin-top: 2.25rem;
    margin-top: 1.25lh;
  }

  .home-page .index-scroll,
  .personal-index-scroll,
  .clientele-index-scroll {
    width: 100%;
    padding-bottom: 0;
    overflow-x: clip;
    scrollbar-gutter: auto;
  }

  .site-name,
  .showreel-updated {
    width: 100%;
  }

  .site-name {
    container-type: inline-size;
    grid-template-areas: "weather current";
    grid-template-columns: minmax(0, 1fr) var(--date-column-width);
  }

  .showreel-updated {
    grid-template-columns: minmax(0, 1fr) var(--date-column-width);
  }

  .weather-line {
    grid-area: weather;
  }

  .site-name #current-date {
    grid-area: current;
    text-align: right;
  }

  .showreel-updated {
    display: grid;
    grid-area: updated;
  }

  .showreel-updated time {
    text-align: right;
  }

  .about-quote h2 {
    margin-bottom: 0;
  }

  .about-navigation {
    margin-bottom: 1.5rem;
  }

  .about-quote blockquote,
  .quote-attribution {
    display: none;
  }

  .file-index tbody tr {
    display: grid;
    width: 100%;
    padding: 0.5rem 0;
    grid-template-columns: minmax(0, 1fr) var(--date-column-width);
    row-gap: 0.125rem;
  }

  .home-page .tools-index tbody tr {
    padding-bottom: 0.625rem;
  }

  .file-index .title-cell {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0;
    overflow-wrap: anywhere;
  }

  .file-index .link-target-row .title-cell {
    height: auto;
  }

  .file-index .date-cell {
    padding: 0;
  }

  .file-index .date-cell {
    text-align: right;
  }

  .personal-index .date-cell ~ td,
  .clientele-index .date-cell ~ td {
    width: auto;
    min-width: 0;
    padding: 0;
    grid-column: 1 / -1;
    line-height: inherit;
    white-space: normal;
    overflow-wrap: anywhere;
  }

}

@container (max-width: 20.25rem) {
  .weather-attribution {
    display: none;
  }
}

@media (forced-colors: active) {
  .has-more-above,
  .has-more-below {
    -webkit-mask-image: none;
    mask-image: none;
  }
}