:root {
  color-scheme: light;
  --purple: #461f4d;
  --ink: #392c3e;
  --muted: #695b6d;
  --cream: #fbf8f3;
  --line: #c5b2ca;
  font-family: "Aptos Display", Aptos, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.65; }
a { color: var(--purple); text-underline-offset: .3em; text-decoration-thickness: 1px; }
a:hover { color: #7537a3; text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #7537a3; outline-offset: 5px; border-radius: 2px; }
.wrap { width: min(1160px, calc(100% - 6rem)); margin-inline: auto; }
.hero { display: grid; background: var(--cream); }
.sky-content, .landscape { grid-area: 1 / 1; }
.sky-content {
  position: relative;
  z-index: 1;
  /* The image moves down as the viewport narrows so 47% of its height
     remains visible below the intro. */
  --image-tail: 15.71vw;
  --sky-bottom-space: max(0px, calc(var(--image-tail) - .65rem));
  align-self: start;
  isolation: isolate;
  padding-bottom: var(--sky-bottom-space);
}
.header-contact-line { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .35rem .7rem; color: var(--purple); font-size: .875rem; }
.header-contact-line > span { font-family: Georgia, Cambria, "Times New Roman", serif; font-size: 1.125rem; line-height: 1; }
.header-contact-line .contacts { gap: .1rem; }
.contacts svg { display: block; width: 21px; height: 21px; }
.copyright { margin: 0; font-size: .875rem; color: var(--muted); }
.site-header {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(1330px, calc(100% - 76px));
  margin-left: max(1.25rem, calc((100% - 1160px) / 2 - 110px));
  margin-right: auto;
  padding-block: .5rem;
}
.identity { display: flex; align-items: center; gap: 1.1rem; }
.logo { width: 56px; height: 56px; flex-shrink: 0; }
.name { font: 1.8rem/1.25 Georgia, Cambria, "Times New Roman", serif; color: var(--purple); margin: 0 0 .35rem; }
.role { font-size: .875rem; letter-spacing: .12em; margin: 0; }
.contacts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.contacts a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--purple); }
.contacts a:hover { color: #7537a3; }
.introduction {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 17.6rem;
  padding-top: .75rem;
  width: min(1110px, calc(100% - 146px));
  margin-left: max(1.25rem, calc((100% - 1160px) / 2 - 110px));
}
.intro-copy { position: relative; isolation: isolate; max-width: 1160px; }
.sky-content::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--sky-bottom-space) + .65rem) 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(251 248 243 / 36%) 0, rgb(251 248 243 / 36%) calc(100% - 40px), transparent 100%);
}
h1, h2 { font-family: Georgia, Cambria, "Times New Roman", serif; color: var(--purple); font-weight: 400; }
h1 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .65rem; }
.intro-copy p { margin: 0 0 .65rem; font-size: 1rem; line-height: 1.45; }
.landscape { display: block; width: 100%; height: auto; align-self: end; }
.gallery-surface { background: var(--cream); padding-bottom: 4rem; }
.divider { display: flex; align-items: center; gap: 1rem; padding-block: 2.2rem 3.8rem; }
.divider span { height: 1px; background: var(--line); flex: 1; }
.divider img { width: 34px; height: 34px; }
.gallery { display: grid; gap: 5.5rem; }
.project { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.project:nth-child(even) { grid-template-columns: 1fr 1.1fr; }
.project:nth-child(even) .project-media { grid-column: 2; grid-row: 1; }
.project:nth-child(even) .project-copy { grid-column: 1; grid-row: 1; }
.project-media { min-width: 0; border: 1px solid #d9cddd; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 10px #461f4d08; }
.project-media img { display: block; width: 100%; height: auto; }
.image-placeholder { aspect-ratio: 16 / 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .4rem; background: #eee7ef; color: var(--muted); }
.image-placeholder span:first-child { font: 1.4rem Georgia, Cambria, "Times New Roman", serif; }
.image-placeholder span:last-child { font-size: .875rem; }
h2 { font-size: clamp(1.6rem, 2.7vw, 2.1rem); line-height: 1.2; margin: 0 0 1rem; overflow-wrap: anywhere; }
.project-copy > p { margin: 0 0 1rem; }
.project-copy .draft-label { color: var(--muted); font-size: .875rem; margin-bottom: .5rem; }
.tags { display: flex; flex-wrap: wrap; list-style: none; padding: 0; gap: .5rem; margin: 0 0 1rem; }
.tags li { font-size: .875rem; background: #eee5f0; color: var(--purple); padding: .15rem .7rem; border-radius: 1rem; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.project-links:empty { display: none; }
.project-links a { display: inline-flex; align-items: center; gap: .5rem; padding-block: .5rem; }
.project-links svg { width: 21px; height: 21px; flex: none; }
.project-link-separator { color: var(--line); }
.detail-page { background: var(--cream); }
.detail-site-header {
  width: min(1160px, calc(100% - 6rem));
  margin-inline: auto;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.identity-link { color: inherit; text-decoration: none; }
.identity-link:hover { color: inherit; }
.detail-main { padding-block: 2rem 5rem; }
.back-link { display: inline-block; margin-bottom: 2.5rem; padding-block: .4rem; }
.detail-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.detail-hero--text-only { grid-template-columns: minmax(0, 780px); }
.detail-heading h1 { font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.1; margin: 0 0 1.25rem; }
.detail-summary { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; }
.detail-media { margin: 0; overflow: hidden; border: 1px solid #d9cddd; border-radius: 8px; box-shadow: 0 3px 10px #461f4d08; }
.detail-media img { display: block; width: 100%; height: auto; }
.detail-body { max-width: 780px; margin: 4.5rem auto 0; font-size: 1.0625rem; line-height: 1.75; }
.detail-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.6rem, 3vw, 2rem); }
.detail-body p { margin: 0 0 1.25rem; }
.detail-body ul, .detail-body ol { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.detail-body li + li { margin-top: .45rem; }
.detail-body a { overflow-wrap: anywhere; }
.detail-body code { font-family: "Liberation Mono", Consolas, monospace; font-size: .9em; }
.site-footer { border-top: 1px solid var(--line); padding-block: 2rem 2.5rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.site-footer .logo { width: 42px; height: 42px; }
.site-footer .name { font-size: 1.15rem; }
.site-footer .role { font-size: .875rem; letter-spacing: .025em; }
.skip-link { position: absolute; top: .5rem; left: 1rem; padding: .6rem 1rem; background: var(--cream); z-index: 5; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

@media (min-width: 761px) and (max-width: 1993px) {
  /* When the image releases from the page top, its first resting point is
     directly below the 72px identity/contact row. From there the proportional
     bottom anchoring can move it farther down as the viewport narrows. */
  .landscape { margin-top: 72px; }
  .sky-content::before {
    /* The image top is the larger of the header height and the position
       produced by the proportional bottom anchor. Keep that edge seamless
       with the header, then reveal the image toward the last line of text. */
    --image-top: max(72px, calc(100% + var(--image-tail) - 33.43vw));
    background: linear-gradient(
      to bottom,
      var(--cream) 0,
      var(--cream) var(--image-top),
      transparent 100%
    );
  }
}

@media (max-width: 760px) {
  .hero { display: block; }
  .wrap { width: calc(100% - 2.5rem); }
  .site-header { align-items: flex-start; flex-direction: column; gap: 1rem; width: calc(100% - 2.5rem); margin-inline: auto; padding-block: 1.5rem; }
  .logo { width: 56px; height: 56px; }
  .name { font-size: 1.45rem; }
  .role { font-size: .875rem; letter-spacing: .035em; }
  .introduction { display: block; min-height: 0; width: calc(100% - 2.5rem); padding-top: 1.2rem; margin-inline: auto; }
  .intro-copy p { font-size: 1rem; line-height: 1.7; }
  .header-contact-line { justify-content: flex-start; }
  .sky-content { padding-bottom: 1rem; background: #f3eaf2; }
  .sky-content::before { display: none; }
  .landscape { grid-area: auto; }
  .divider { padding-block: 1.5rem 2.5rem; }
  .gallery { gap: 3.5rem; }
  .project, .project:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .project:nth-child(even) .project-media, .project:nth-child(even) .project-copy { grid-column: auto; grid-row: auto; }
  .detail-site-header { width: calc(100% - 2.5rem); margin-inline: auto; }
  .detail-main { padding-block: 1.5rem 3.5rem; }
  .back-link { margin-bottom: 1.75rem; }
  .detail-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .detail-heading h1 { font-size: 2.2rem; }
  .detail-body { margin-top: 3rem; font-size: 1rem; line-height: 1.7; }
  .detail-body h2 { margin-top: 2.5rem; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) { a { transition: color 120ms ease; } }