:root {
  --paper: #ede8d2;
  --paper-light: #f6f1dd;
  --moss: #384b36;
  --lichen: #8c9b73;
  --clay: #a95f45;
  --yellow: #dccf72;
  --ink: #242923;
  --faded: #696c5c;
  --rule: rgba(36, 41, 35, .22);
  --serif: Georgia, "Times New Roman", serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(56, 75, 54, .09) .6px, transparent .7px);
  background-size: 6px 6px;
  font-family: var(--serif);
  line-height: 1.6;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--clay); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--clay); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: 1rem; left: 1rem; padding: .6rem 1rem; background: var(--ink); color: white; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.masthead, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.masthead { position: relative; padding: 3rem 0 5rem; border-top: 7px solid var(--moss); }
.masthead__mark { position: absolute; right: 2rem; top: 1.5rem; width: 76px; height: 76px; border: 1px solid var(--rule); border-radius: 50%; }
.masthead__mark span { position: absolute; left: 50%; bottom: 50%; width: 1px; height: 34px; transform-origin: bottom; background: var(--moss); }
.masthead__mark span:nth-child(2) { transform: rotate(55deg); }
.masthead__mark span:nth-child(3) { transform: rotate(110deg); }
.masthead__mark span:nth-child(4) { transform: rotate(165deg); }
.kicker, .eyebrow, .taxonomy, .classification, .portrait figcaption, .lens, .collection__index {
  font: .72rem/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase;
}
.kicker { margin: 0 0 4rem; color: var(--moss); }
.identity { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
h1 { margin: 0; max-width: 780px; font-size: clamp(4rem, 10vw, 8.5rem); line-height: .82; letter-spacing: -.065em; font-weight: normal; }
.role { max-width: 620px; margin: 2rem 0; color: var(--clay); font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.3; }
.summary { max-width: 650px; font-size: 1.06rem; }
.summary p { margin: .65rem 0; }
.contact { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin-top: 2rem; font-family: var(--mono); font-size: .8rem; }
.portrait { position: relative; margin: 0; }
.portrait::before { content: ""; position: absolute; inset: -18px 18px 18px -18px; border: 1px solid var(--moss); border-radius: 48% 48% 8px 8px; z-index: -1; }
.portrait img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.58) sepia(.12) contrast(1.02); border-radius: 48% 48% 6px 6px; }
.portrait__rings { position: absolute; z-index: 2; right: -28px; bottom: 22px; width: 90px; aspect-ratio: 1; border: 1px solid var(--yellow); border-radius: 50%; box-shadow: 0 0 0 8px var(--moss), 0 0 0 9px var(--yellow), 0 0 0 17px var(--moss), 0 0 0 18px var(--yellow); opacity: .9; }
.portrait figcaption { margin-top: 1rem; display: flex; justify-content: space-between; }
.portrait figcaption span { color: var(--clay); }

.guide { border-top: 1px solid var(--ink); padding: 3rem 0 6rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.eyebrow { margin: 0 0 .7rem; color: var(--clay); }
h2 { margin: 0; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: .95; font-weight: normal; letter-spacing: -.04em; }
.section-note { max-width: 340px; margin: 0; color: var(--faded); font-style: italic; }
.lens { position: sticky; top: 1rem; z-index: 10; display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin: 0 0 2rem auto; padding: .55rem .7rem .55rem 1rem; background: var(--moss); color: var(--paper-light); box-shadow: 5px 5px 0 rgba(169, 95, 69, .55); }
.lens__buttons { display: flex; gap: .25rem; }
.lens button { border: 0; padding: .45rem .65rem; color: inherit; background: transparent; font: inherit; text-transform: uppercase; letter-spacing: inherit; cursor: pointer; }
.lens button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.lens__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.specimen { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.5fr); min-height: 530px; border-top: 1px solid var(--rule); }
.specimen__visual { position: relative; display: grid; place-items: center; min-height: 470px; overflow: hidden; border-right: 1px solid var(--rule); }
.specimen:nth-child(even) .specimen__visual { background: rgba(140, 155, 115, .12); }
.plate-number { position: absolute; top: 1.2rem; left: 0; font: 4rem/.8 var(--serif); color: rgba(56, 75, 54, .16); }
.mode-word { display: none; position: absolute; right: 1rem; bottom: 1rem; color: var(--clay); font: .65rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
body:not([data-lens]) .mode-word--roots, body[data-lens="roots"] .mode-word--roots, body[data-lens="growth"] .mode-word--growth, body[data-lens="pruning"] .mode-word--pruning { display: block; }
.plant { position: relative; width: 210px; height: 360px; transition: transform .45s ease; }
.stem { position: absolute; left: 102px; top: 46px; width: 8px; height: 250px; background: var(--moss); border-radius: 90% 10% 60% 20%; transform: rotate(-2deg); }
.leaf { position: absolute; width: 86px; height: 44px; background: var(--moss); border-radius: 100% 5% 100% 5%; transform-origin: right center; }
.leaf--a { left: 18px; top: 100px; transform: rotate(10deg); }
.leaf--b { left: 107px; top: 145px; transform: scaleX(-1) rotate(5deg); }
.leaf--c { left: 23px; top: 205px; width: 78px; transform: rotate(-8deg); }
.leaf--d { left: 110px; top: 60px; width: 62px; transform: scaleX(-1) rotate(-22deg); }
.root { position: absolute; left: 103px; top: 285px; width: 3px; height: 74px; background: var(--clay); transform-origin: top; }
.root--a { transform: rotate(31deg); }.root--b { transform: rotate(-36deg); height: 67px; }.root--c { transform: rotate(3deg); }
.cut { display: none; position: absolute; width: 28px; height: 3px; background: var(--clay); }
.cut--a { top: 146px; left: 90px; transform: rotate(35deg); }.cut--b { top: 208px; left: 100px; transform: rotate(-40deg); }
.plant--2 { transform: scale(.85) rotate(7deg); }.plant--2 .leaf { border-radius: 50%; }
.plant--3 { transform: scale(1.05) rotate(-4deg); }.plant--3 .leaf { background: var(--lichen); }
.plant--4 { transform: scale(.92); }.plant--4 .leaf--a, .plant--4 .leaf--c { width: 55px; height: 70px; }
body[data-lens="growth"] .plant { transform: scale(1.08); }
body[data-lens="growth"] .leaf { background: var(--lichen); }
body[data-lens="pruning"] .leaf--b, body[data-lens="pruning"] .leaf--c { opacity: .12; }
body[data-lens="pruning"] .cut { display: block; }
body[data-lens="pruning"] .plant { transform: scale(.88); }
.specimen__body { padding: clamp(2rem, 5vw, 4.5rem); align-self: center; }
.specimen__header { display: flex; justify-content: space-between; gap: 2rem; align-items: start; }
.taxonomy { margin: 0 0 .7rem; color: var(--faded); }
h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.12; font-weight: normal; }
.company { margin: .25rem 0; text-align: right; font-size: 1.15rem; font-style: italic; }
.external { padding-left: .3em; font-style: normal; }
.observations { margin: 2rem 0; padding: 0; list-style: none; }
.observations li { position: relative; padding: .85rem 0 .85rem 1.6rem; border-bottom: 1px dotted var(--rule); }
.observations li::before { content: ""; position: absolute; left: 0; top: 1.5rem; width: 7px; height: 7px; border: 1px solid var(--clay); border-radius: 50%; }
.classification { color: var(--faded); }
.classification > span { display: block; margin-bottom: .8rem; }
.classification ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.classification li { padding: .3rem .55rem; border: 1px solid var(--rule); color: var(--ink); letter-spacing: 0; text-transform: none; }

.understory { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(3rem, 8vw, 8rem); padding: 6rem 0; border-top: 1px solid var(--ink); }
.root-map { position: relative; width: 180px; height: 180px; margin: 5rem auto 0; border-top: 2px solid var(--moss); }
.root-map i { position: absolute; top: 0; left: 50%; width: 2px; height: 150px; background: var(--moss); transform-origin: top; }
.root-map i:nth-child(2) { transform: rotate(25deg); height: 130px; }.root-map i:nth-child(3) { transform: rotate(-25deg); height: 130px; }.root-map i:nth-child(4) { transform: rotate(48deg); height: 90px; }.root-map i:nth-child(5) { transform: rotate(-48deg); height: 90px; }
.collections { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.collection { position: relative; }
.collection + .collection { margin-top: 4rem; }
.collection__index { position: absolute; right: 0; top: -.5rem; width: 2rem; height: 2rem; display: grid; place-items: center; margin: 0; border: 1px solid var(--clay); border-radius: 50%; color: var(--clay); }
.collection h3 { padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.skill-list { margin: 0; padding: 0; list-style: none; }
.skill-list li { display: flex; gap: 1.2rem; padding: .7rem 0; border-bottom: 1px dotted var(--rule); }
.skill-list span { color: var(--clay); font: .7rem var(--mono); }
.credential { padding: 1.2rem 0; border-bottom: 1px dotted var(--rule); }
.credential h4 { margin: 0; font-size: 1.15rem; font-weight: normal; }.credential p { margin: .3rem 0 0; color: var(--faded); }
.references { padding: 5rem 0; border-top: 1px solid var(--ink); }
.reference-list { columns: 2; column-gap: 5rem; }
.reference { break-inside: avoid; margin: 0 0 4rem; }
.reference blockquote { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.5; }
.reference blockquote p::first-letter { color: var(--clay); font-size: 2rem; }
.reference figcaption { display: flex; flex-direction: column; margin-top: 1.2rem; font: .75rem/1.5 var(--mono); }
.reference figcaption strong { text-transform: uppercase; letter-spacing: .08em; }.reference figcaption span { color: var(--faded); }
footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 3rem; padding: 2rem 0 4rem; border-top: 7px solid var(--moss); font: .75rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
footer p { margin: 0; } footer a { margin-left: auto; }

@media (max-width: 800px) {
  .identity, .understory { grid-template-columns: 1fr; }
  .identity { gap: 4rem; }
  .portrait { width: min(78%, 380px); margin-inline: auto; }
  .specimen { grid-template-columns: 1fr; }
  .specimen__visual { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .plant { transform: scale(.78); }
  .plant--2, .plant--3, .plant--4 { transform: scale(.78); }
  .understory__intro { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .understory__intro .eyebrow { grid-column: 1 / -1; }
  .root-map { margin: 0; width: 100px; height: 100px; transform: scale(.6); transform-origin: top right; }
}
@media (max-width: 570px) {
  .masthead, main, footer { width: min(100% - 28px, 1180px); }
  .masthead { padding-top: 2rem; }
  .kicker { padding-right: 80px; margin-bottom: 3rem; }
  .masthead__mark { right: .5rem; }
  h1 { font-size: clamp(3.6rem, 20vw, 6rem); }
  .section-heading, .specimen__header { display: block; }
  .section-note { margin-top: 1.2rem; }
  .company { text-align: left; }
  .lens { position: relative; top: 0; margin-left: 0; display: block; width: 100%; }
  .lens__label { display: block; margin-bottom: .5rem; }
  .lens__buttons { justify-content: space-between; }
  .specimen__body { padding: 2rem .5rem 3.5rem; }
  .collections { grid-template-columns: 1fr; }
  .reference-list { columns: 1; }
  footer { display: block; }
  footer > * { display: block; margin: .8rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}