/* Original ajl.co composition: large cropped portrait, intentionally overlapping
   black bio panel, and separate underlined contact. Existing font assets stay intact. */

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("assets/fonts/inter-tight.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --gnrc-color-fixed-white: #ffffff;
  --gnrc-color-fixed-black: #000000;
  --gnrc-font-family-content-editorial: "Instrument Serif", Georgia, serif;
  --gnrc-font-family-functional: "Inter Tight", Arial, sans-serif;
  --gnrc-spacing-component-base-200: 8px;
  --gnrc-spacing-component-base-300: 12px;
  --gnrc-spacing-layout-base-200: 16px;
  --gnrc-spacing-layout-base-300: 24px;
  --gnrc-spacing-layout-base-400: 32px;
  --gnrc-spacing-layout-base-600: 48px;
  --gnrc-spacing-layout-base-800: 64px;
  --gnrc-spacing-layout-base-1000: 80px;
  --gnrc-spacing-layout-base-1200: 96px;
  --gnrc-stroke-width-thick: 2px;
  --page-gutter: clamp(24px, 4vw, 88px);
  --media-ratio: 3 / 2;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--gnrc-color-fixed-white);
  color: var(--gnrc-color-fixed-black);
  font-family: var(--gnrc-font-family-functional);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--gnrc-color-fixed-white);
  background: var(--gnrc-color-fixed-black);
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-underline-offset: 4px;
}

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

h1,
h2,
p,
figure {
  margin: 0;
}

h1,
h2,
.opening,
.project-meta {
  font-family: var(--gnrc-font-family-content-editorial);
  font-weight: 400;
}

h1,
.about h2,
.contact h2 {
  font-size: clamp(45px, 4.55vw, 66px);
  line-height: 1.2;
}

:where(a, button):focus-visible {
  outline: var(--gnrc-stroke-width-thick) solid var(--gnrc-color-fixed-black);
  outline-offset: 4px;
}

main:focus {
  outline: none;
}

section,
article,
footer {
  scroll-margin-top: var(--gnrc-spacing-layout-base-300);
}

.page-width {
  width: min(calc(100% - 27.2vw - var(--page-gutter)), 1440px);
  /* Balanced by what the eye sees, not by the box: every project image draws
     its artwork mid-frame on white, so the visible right edge sits about 29% of
     the media width inside the box. Shifting the original 27.2vw / gutter frame
     4.95vw left leaves equal space beside the text and beside the artwork
     (at 1728px: 384px left; artwork 341-468px, about 384px, right). */
  --optical-shift: 2.95vw; /* 4.95vw balance, less a 2vw nudge right for ragged-right text */
  margin-inline: calc(27.2vw - var(--optical-shift)) calc(var(--page-gutter) + var(--optical-shift));
}

.skip-link {
  position: absolute;
  z-index: 3;
  top: var(--gnrc-spacing-layout-base-200);
  left: var(--page-gutter);
  padding: var(--gnrc-spacing-component-base-200) var(--gnrc-spacing-layout-base-200);
  background: var(--gnrc-color-fixed-white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.motion-toggle {
  position: fixed;
  z-index: 3;
  top: var(--gnrc-spacing-layout-base-200);
  left: var(--page-gutter);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
  background: var(--gnrc-color-fixed-white);
  color: var(--gnrc-color-fixed-black);
  font-family: var(--gnrc-font-family-functional);
  font-size: 14px;
  line-height: 1.5;
}

.motion-toggle:focus-visible {
  width: auto;
  height: auto;
  padding: var(--gnrc-spacing-component-base-200) var(--gnrc-spacing-layout-base-200);
  border: 1px solid var(--gnrc-color-fixed-black);
  overflow: visible;
  clip-path: none;
  pointer-events: auto;
}

.intro {
  padding-block: 76px;
}

.opening {
  margin-top: var(--gnrc-spacing-layout-base-400);
  font-size: 26px;
  line-height: 1.4;
}

.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  gap: var(--gnrc-spacing-component-base-300);
  padding-block: 84px var(--gnrc-spacing-layout-base-600);
}

.project-copy,
.project-media {
  min-width: 0;
  grid-row: 1;
}

.project-copy {
  grid-column: 1;
}

.project-media {
  grid-column: 2;
}

.project-meta {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--gnrc-spacing-component-base-300);
  font-size: 26px;
  line-height: 1.4;
}

.project-meta img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.project h2 {
  margin-top: var(--gnrc-spacing-layout-base-400);
  font-size: clamp(30px, 2.84vw, 41px);
  line-height: 1.4;
  text-wrap: pretty;
}

.project-description {
  margin-top: var(--gnrc-spacing-layout-base-400);
  text-wrap: pretty;
}

/* A quiet way into the private overview: same size and colour as the copy,
   set apart only by its underline. */
.project-link {
  margin-top: var(--gnrc-spacing-layout-base-300);
}

.project-link a {
  text-decoration-thickness: 1px;
}

.media-stage {
  position: relative;
  display: block;
  aspect-ratio: var(--media-ratio);
  background: var(--gnrc-color-fixed-white);
  cursor: default;
}

/* The different unframed media proportions follow the recorded original sections. */
#microsoft-ai {
  --media-ratio: 8 / 5;
}

#github {
  --media-ratio: 12 / 7;
}

#azure-devops,
#google-ads {
  --media-ratio: 10 / 7;
}

#yelp {
  --media-ratio: 4 / 3;
}

.media-poster,
.media-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--gnrc-color-fixed-white);
  object-fit: contain;
  pointer-events: none;
}

.media-frame {
  visibility: hidden;
}

.media-stage[data-media-ready="true"] .media-frame {
  visibility: visible;
}

.media-status,
.media-retry {
  margin-top: var(--gnrc-spacing-component-base-300);
  font-size: 13px;
  line-height: 1.5;
}

.media-retry {
  margin-inline-end: var(--gnrc-spacing-component-base-300);
  padding: var(--gnrc-spacing-component-base-200);
  border: 1px solid var(--gnrc-color-fixed-black);
  background: var(--gnrc-color-fixed-white);
  color: var(--gnrc-color-fixed-black);
  font-family: var(--gnrc-font-family-functional);
}

.about {
  padding-block: var(--gnrc-spacing-layout-base-600)
    calc(var(--gnrc-spacing-layout-base-1200) + var(--gnrc-spacing-layout-base-800) + var(--gnrc-spacing-component-base-200));
}

.about h2,
.contact h2 {
  font-size: clamp(43.3456px, 4.3511vw, 62.656px);
  line-height: 1.25;
}

.about-layout {
  --portrait-scale: 0.81;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-top: 40px;
}

.portrait {
  grid-column: 1;
  grid-row: 1;
  width: calc(49.45% * var(--portrait-scale));
  aspect-ratio: 3 / 4;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48.8% 18.4%;
}

.about-copy p + p {
  margin-top: var(--gnrc-spacing-layout-base-200);
}

.about-copy {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  width: 43.83%;
  margin-inline-start: calc(44.94% * var(--portrait-scale));
  margin-block-start: 0;
  background: var(--gnrc-color-fixed-black);
  color: var(--gnrc-color-fixed-white);
}

.about-copy-content {
  padding: 12%;
}

.contact {
  padding-block: 104px 92px;
  padding-inline: 2vw 4vw;
  text-align: start;
}

.contact h2 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

.contact-links {
  display: flex;
  justify-content: start;
  margin-top: 11px;
}

.contact-links a {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: start;
}

.contact-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  background: var(--gnrc-color-fixed-black);
  color: var(--gnrc-color-fixed-white);
  font-family: var(--gnrc-font-family-functional);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

@media (max-width: 48rem) {
  .page-width {
    width: calc(100% - var(--page-gutter) * 2);
    margin-inline: auto;
  }

  h1 {
    font-size: 45px;
  }

  .intro {
    padding-block: var(--gnrc-spacing-layout-base-800) 40px;
  }

  .opening,
  .project-meta {
    font-size: 21.5px;
  }

  .project {
    grid-template-columns: 1fr;
    gap: var(--gnrc-spacing-layout-base-300);
    padding-block: var(--gnrc-spacing-layout-base-800) var(--gnrc-spacing-layout-base-400);
    --media-ratio: 22 / 15;
  }

  .project-media {
    grid-column: 1;
    grid-row: 2;
  }

  .project-meta img {
    width: 24px;
    height: 24px;
  }

  .project h2 {
    font-size: 30px;
  }

  #microsoft-ai,
  #github,
  #azure-devops,
  #google-ads,
  #yelp {
    --media-ratio: 22 / 15;
  }

  #microsoft-ai {
    gap: var(--gnrc-spacing-component-base-200);
    --media-ratio: 12 / 5;
  }

  .about {
    padding-block: 28px;
  }

  .about-layout {
    align-items: start;
    margin-top: var(--gnrc-spacing-layout-base-200);
  }

  .portrait {
    width: calc(61.3% * var(--portrait-scale));
    aspect-ratio: 31 / 50;
  }

  .about-copy {
    width: 87.1%;
    margin-inline-start: calc(12.9% * var(--portrait-scale));
    margin-block-start: calc(51% * var(--portrait-scale));
  }

  .contact {
    padding-block: 72px 56px;
    padding-inline: 4vw;
  }

  .contact-links {
    margin-top: 51px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}