:root {
  color-scheme: light;
  --yew: #142f26;
  --deep: #0c221a;
  --paper: #f4f0e5;
  --ink: #233b2e;
  --muted: #4d5e51;
  --brass: #aa9b6b;
  --iris: #b8bded;
  --display: "Instrument Serif", Georgia, serif;
  --body: "IBM Plex Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--yew); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, p, figure { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; }
::selection { color: var(--deep); background: #c9d3b6; }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid var(--iris); outline-offset: 8px; }
.wrap { width: min(1160px, calc(100% - 192px)); margin-inline: auto; }
.garden { position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate; }

.masthead {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 112px;
  border-bottom: 1px solid #f4f0e52b;
}
.brand-mark { width: 45px; height: 45px; border-radius: 50%; }
.wordmark { font-family: var(--display); font-size: 36px; line-height: 1; letter-spacing: -.7px; white-space: nowrap; }
.wordmark span { color: var(--iris); }

.hero { position: relative; padding: 52px 0 64px; }
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -112px 0 0;
  background: radial-gradient(ellipse at 79% 40%, #71825424, transparent 50%);
  pointer-events: none;
}
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 88px; }
.hero-copy { position: relative; z-index: 4; padding-bottom: 16px; }
h1 { font-size: clamp(88px, 8.35vw, 124px); line-height: .94; letter-spacing: -.033em; margin-bottom: 32px; }
h1 em { font-weight: 400; color: var(--iris); }
.intro { max-width: 430px; font-size: 18px; line-height: 1.75; color: #d5dccd; }
.world { position: relative; z-index: 1; width: min(100%, 482px); justify-self: end; }
.world::before {
  content: "";
  position: absolute;
  inset: -22px -24px -18px;
  z-index: -1;
  border: 1px solid #aa9b6b42;
  border-radius: 50% 50% 2px 2px;
  box-shadow: 14px 25px 32px #06170e80;
}
.conservatory-frame {
  position: relative;
  border: 10px solid #d6cfb6;
  border-radius: 49% 49% 1px 1px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #7d7e58, 0 2px 0 #f9f4dc85, 15px 25px 40px #04180eb3;
}
.conservatory-frame picture { display: block; background: #526643; }
.conservatory-frame img { width: 100%; height: auto; }
.conservatory-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 5px 6px 16px #16261940;
  pointer-events: none;
}
.plant { position: absolute; pointer-events: none; user-select: none; }
.plant img { width: 100%; height: auto; }
.canopy { z-index: 2; width: 540px; right: -110px; top: -150px; }
.canopy img { transform-origin: 92% 8%; animation: canopy-drift 19s ease-in-out infinite alternate; }
.fern { z-index: 3; width: 510px; right: -135px; bottom: 0; }
.fern img { transform-origin: 96% 94%; animation: fern-drift 13s ease-in-out infinite alternate; filter: drop-shadow(-12px 16px 9px #06170e45); }
.broadleaf { z-index: 3; width: 390px; left: -210px; bottom: 0; }
.broadleaf img { transform-origin: 14% 94%; animation: leaf-drift 17s ease-in-out -7s infinite alternate; filter: drop-shadow(13px 17px 9px #06170e52); }

.thesis { position: relative; background: var(--paper); color: var(--ink); padding: 44px 0 64px; border-top: 1px solid #c5bea1; }
.thesis::after { content: ""; position: absolute; inset: 12px 20px; border: 1px solid #b3b69538; pointer-events: none; }
.thesis-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: start; }
h2 { font-size: clamp(39px, 3.8vw, 56px); line-height: 1.08; letter-spacing: -.025em; }
.prose { padding-top: 2px; }
.prose p { margin-bottom: 25px; font-size: 17px; line-height: 1.8; color: var(--muted); }
.prose p:last-child { margin-bottom: 0; }
.master-emblem {
  width: 280px;
  margin: 45px 0 0 14px;
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.not-found { min-height: 100svh; }
.not-found main { padding-block: 90px; }
.not-found a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; }

@keyframes canopy-drift { from { transform: rotate(-.6deg); } to { transform: rotate(.7deg); } }
@keyframes fern-drift { from { transform: rotate(-.6deg); } to { transform: rotate(1.05deg); } }
@keyframes leaf-drift { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }

@media (min-width: 1600px) {
  .hero { padding-bottom: 80px; }
  .broadleaf { left: calc((100vw - 1600px) / 2 - 160px); }
  .fern { right: calc((100vw - 1600px) / 2 - 135px); }
}
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 128px); }
  .hero { padding-top: 58px; padding-bottom: 64px; }
  .hero-layout { gap: 55px; }
  h1 { font-size: clamp(76px, 8.9vw, 95px); }
  .intro { font-size: 17px; line-height: 1.75; }
  .world { width: 100%; }
  .canopy { width: 460px; right: -130px; top: -126px; }
  .fern { width: 420px; right: -128px; bottom: 0; }
  .broadleaf { width: 340px; left: -178px; bottom: 0; }
  .thesis { padding: 48px 0 64px; }
  .thesis-layout { grid-template-columns: .9fr 1.1fr; gap: 50px; }
  .prose p { font-size: 16px; }
  .master-emblem { width: 245px; margin-left: 0; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 88px); }
  .hero-layout { gap: 36px; }
  h1 { font-size: 75px; }
  .intro { font-size: 16px; }
  .canopy { right: -180px; }
  .fern { width: 365px; }
  .thesis-layout { gap: 35px; }
  h2 { font-size: 39px; }
}
@media (max-width: 700px) {
  .wrap { width: calc(100% - 56px); }
  .masthead { min-height: 96px; gap: 11px; }
  .brand-mark { width: 40px; height: 40px; }
  .wordmark { font-size: 31px; }
  .hero { padding: 48px 0 72px; }
  .hero-layout { display: flex; flex-direction: column; gap: 52px; align-items: stretch; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(73px, 18vw, 100px); margin-bottom: 27px; }
  .intro { font-size: 17px; line-height: 1.75; max-width: 470px; }
  .world { width: min(350px, calc(100% - 8px)); align-self: center; }
  .world::before { inset: -13px -12px -12px; }
  .conservatory-frame { border-width: 8px; }
  .canopy { display: none; }
  .fern { width: 260px; right: -78px; bottom: 0; }
  .broadleaf { width: 230px; left: -115px; bottom: 0; }
  .fern img { animation-duration: 18s; }
  .broadleaf img { animation: none; }
  .thesis { padding: 50px 0; }
  .thesis::after { inset: 10px; }
  .thesis-layout { display: flex; flex-direction: column; gap: 27px; }
  .thesis-heading { display: contents; }
  h2 { font-size: clamp(39px, 10.5vw, 52px); }
  .master-emblem { order: 3; align-self: center; width: 210px; margin: 0; }
  .prose { padding: 0; }
  .prose p { font-size: 16px; line-height: 1.8; margin-bottom: 23px; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 44px); }
  .masthead { min-height: 85px; }
  .wordmark { font-size: 28px; }
  .brand-mark { width: 35px; height: 35px; }
  .hero { padding-top: 40px; }
  h1 { font-size: 67px; }
  .intro { font-size: 16px; }
  .hero-layout { gap: 45px; }
  .fern { width: 240px; right: -90px; }
  .broadleaf { width: 210px; left: -117px; }
  h2 { font-size: 37px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep original copy in normal flow; contact is a separate addition. */
.intro, .prose { user-select: text; }
.contact { background: var(--paper); color: var(--ink); padding-bottom: 44px; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; border-top: 1px solid #b5baa5; }
.contact h2 { font-size: 32px; line-height: 1.2; }
.contact a { display: inline-flex; align-items: center; min-height: 48px; font-size: 20px; text-decoration-color: #748463; text-decoration-thickness: 1px; }
.contact a:hover { text-decoration-thickness: 2px; }
.contact a:focus-visible { outline-color: var(--ink); }
@media (max-width: 700px) {
  .contact { padding-bottom: 36px; }
  .contact-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 25px; }
  .contact h2 { font-size: 30px; }
  .contact a { font-size: 19px; }
}

@media (min-width: 701px) {
  .broadleaf { bottom: -80px; clip-path: inset(0 0 80px 0); }
}
@media (min-width: 701px) and (max-width: 800px) {
  .broadleaf { left: -308px; }
}