/* Foundation shared by all three independent sites. */
:root {
  color-scheme: light;
  --bg: #f4f6f1;
  --ink: #142825;
  --muted: #4e615c;
  --accent: #087c72;
  --line: #d4ddd5;
  --panel: #e6ece5;
  --bright: #12ddcc;
  --radius: 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
a:hover { color: var(--accent); }
::selection { background: var(--bright); color: #082c2b; }
.wrap { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-150%); padding: 12px 18px; background: var(--ink); color: var(--bg); }
.skip-link:focus { transform: none; }
.site-header { min-height: 108px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { font-size: 28px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.brand-dot { color: var(--accent); }
nav { display: flex; gap: 36px; font-size: 14px; font-weight: 600; }
nav a { padding-block: 14px; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; padding-block: 86px 100px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.6; text-transform: uppercase; margin: 0 0 26px; }
.tiny-square { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--accent); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(56px, 6.5vw, 90px); font-weight: 600; line-height: 1.02; letter-spacing: -5px; margin-bottom: 32px; }
h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 500; line-height: 1.13; letter-spacing: -1.8px; margin-bottom: 0; }
h3 { font-size: 27px; font-weight: 500; letter-spacing: -.8px; line-height: 1.25; }
.accent-text { color: var(--accent); }
.hero-description { font-size: 18px; line-height: 1.65; max-width: 470px; color: var(--muted); margin-bottom: 32px; }
.text-link { display: inline-flex; align-items: center; gap: 32px; border-bottom: 1px solid currentColor; padding-block: 8px; font-size: 14px; font-weight: 700; }
.text-link span { font-size: 23px; line-height: 1; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; margin-bottom: 44px; }
.section-heading .eyebrow { margin-bottom: 18px; }
.section-heading > p { color: var(--muted); font-size: 14px; margin-bottom: 3px; line-height: 1.6; }
.projects-section { padding-block: 50px 100px; border-top: 1px solid var(--line); }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.project-card { border: 1px solid var(--line); overflow: hidden; border-radius: var(--radius); }
.project-art { height: 280px; position: relative; overflow: hidden; }
.project-copy { padding: 32px; }
.project-copy .eyebrow { font-size: 9px; letter-spacing: 1.2px; margin-bottom: 18px; }
.project-copy h3 { font-size: 36px; margin-bottom: 16px; }
.project-copy p:not(.eyebrow) { color: var(--muted); font-size: 16px; max-width: 445px; margin-bottom: 20px; }
.about-section { padding-block: 68px 100px; border-top: 1px solid var(--line); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.about-grid p { color: var(--muted); max-width: 510px; }
.about-grid .large-copy { font-size: 21px; color: var(--ink); line-height: 1.6; }
.qualification { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--line); margin-top: 32px; font-size: 12px; letter-spacing: 1px; }
.qualification span:first-child { font-family: Georgia, serif; font-size: 22px; letter-spacing: 2px; }
.site-footer { min-height: 130px; border-top: 1px solid var(--line); display: flex; gap: 30px; align-items: center; justify-content: space-between; }
.site-footer p, .site-footer > a:last-child { font-size: 12px; color: var(--muted); margin: 0; }
.site-footer > a:last-child:hover { color: var(--accent); }
.project-hero { padding-block: 80px 92px; gap: 70px; }
.idea-section { padding-block: 60px 85px; border-top: 1px solid var(--line); }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.principle-grid article { border-top: 1px solid var(--line); padding-top: 25px; }
.principle-number { font-size: 11px; letter-spacing: 1px; color: var(--accent); display: block; margin-bottom: 32px; }
.principle-grid h3 { font-size: 23px; margin-bottom: 17px; }
.principle-grid p { font-size: 15px; color: var(--muted); margin-bottom: 0; }
.project-note { padding: 56px; margin-bottom: 80px; background: var(--panel); border-radius: var(--radius); }
.project-note h2 { margin-bottom: 25px; }
.project-note > p:not(.eyebrow) { font-size: 16px; max-width: 580px; color: var(--muted); margin-bottom: 20px; }

/* Personal site: deep green-black and bright turquoise. */
.personal { --bg: #091b1b; --ink: #eff8f4; --muted: #a6bdb7; --accent: #12ddcc; --line: #2d4240; --panel: #142c2a; color-scheme: dark; }
.personal .hero-description { max-width: 445px; }
.personal-art { position: relative; width: 100%; aspect-ratio: 1; background: var(--bright); border-radius: 50%; color: #082c2b; isolation: isolate; overflow: hidden; }
.art-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(#082c2b 1px, transparent 1px), linear-gradient(90deg, #082c2b 1px, transparent 1px); background-size: 48px 48px; }
.art-core { position: absolute; inset: 0; display: grid; place-content: center; font-size: clamp(160px, 24vw, 330px); letter-spacing: -25px; font-weight: 700; line-height: 1; }
.art-core span { position: absolute; right: 22%; bottom: 25%; font-size: 80px; letter-spacing: 0; }
.orbit { position: absolute; border: 1px solid #082c2b; border-radius: 50%; inset: 16% 8%; transform: rotate(-30deg); }
.orbit-two { inset: 8% 24%; transform: rotate(30deg); border-style: dashed; opacity: .6; }
.art-label { position: absolute; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; background: var(--bright); padding: 4px 7px; }
.label-one { top: 19%; left: 17%; transform: rotate(-20deg); }
.label-two { right: 8%; top: 46%; transform: rotate(70deg); }
.label-three { bottom: 16%; left: 21%; transform: rotate(20deg); }
.art-coordinate { position: absolute; bottom: 9%; width: 100%; text-align: center; font-size: 8px; font-weight: 700; letter-spacing: 1.5px; }
.ecosystem-art { background: #e9ebd5; color: #244936; }
.sun { position: absolute; width: 110px; height: 110px; border-radius: 50%; background: #ed8761; right: 12%; top: 35px; }
.plant { position: absolute; bottom: 43px; width: 90px; height: 160px; background: #728a42; border-radius: 100% 0 100% 0; transform: rotate(-25deg); left: 13%; }
.plant-two { left: 26%; height: 110px; width: 65px; transform: rotate(25deg); background: #244936; }
.creature { position: absolute; background: #244936; right: 15%; top: 110px; width: 150px; height: 85px; border-radius: 48% 40% 20% 20%; }
.creature:before { content: ''; position: absolute; width: 56px; height: 60px; border-radius: 50% 50% 20% 20%; top: -36px; right: 0; background: inherit; }
.creature:after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #e9ebd5; right: 16px; top: -12px; }
.creature-two { transform: scale(.46); right: 39%; top: 145px; background: #be613f; }
.art-caption { position: absolute; left: 24px; bottom: 17px; font-size: 8px; font-weight: 700; letter-spacing: 1.8px; }
.identity-art { background: #d9d8ee; color: #292847; }
.identity-node { position: absolute; width: 120px; padding: 14px; border: 1px solid #292847; background: #f1f0fc; z-index: 2; text-align: center; font-size: 10px; letter-spacing: 1px; font-weight: 700; }
.identity-node span { display: block; font-size: 9px; font-weight: 400; letter-spacing: 0; margin-top: 4px; }
.node-human { top: 83px; left: 11%; }
.node-agent { top: 83px; right: 11%; }
.identity-line { height: 1px; background: #292847; position: absolute; top: 118px; left: 30%; right: 30%; }
.scope-ring { position: absolute; right: 5%; top: 37px; width: 190px; height: 166px; border: 1px dashed #6d688f; border-radius: 50%; }
.scope-label { position: absolute; right: 11%; top: 215px; font-size: 8px; letter-spacing: 1.5px; }

/* Animalia: paper tones, botanical greens and warm coral. */
.animalia { --bg: #f5f3e8; --ink: #244936; --muted: #5d6954; --accent: #a4472b; --line: #d4d8be; --panel: #e9ebd5; --bright: #ed8761; }
.animalia h1, .animalia h2 { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -3px; }
.animalia h1 { font-size: clamp(52px, 5.5vw, 78px); line-height: 1.06; }
.animalia h1 em { color: var(--accent); font-weight: 400; }
.animalia-poster { position: relative; min-height: 480px; background: #e4e7cd; border-radius: 48% 48% 4px 4px; overflow: hidden; }
.poster-kicker { position: absolute; top: 45px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: 1.8px; font-weight: 700; }
.playing-card { position: absolute; top: 124px; width: 184px; height: 255px; border-radius: 10px; box-shadow: 0 14px 30px #24493621; border: 1px solid #24493640; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.playing-card > span { font-size: 8px; letter-spacing: 1px; font-weight: 700; }
.playing-card strong { font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.resource-card { left: 10%; background: #748c45; color: #f5f3e8; transform: rotate(-13deg); }
.animal-card { right: 8%; background: #f4ad8d; transform: rotate(12deg); top: 147px; }
.card-leaf { background: #d6dfa4; height: 110px; width: 80px; transform: rotate(20deg); border-radius: 100% 0 100% 0; margin: auto; }
.card-beast { height: 95px; width: 120px; background: #244936; border-radius: 50% 50% 30% 30%; position: relative; margin: 22px auto 5px; }
.card-beast:before, .card-beast:after { content: ''; position: absolute; top: -15px; width: 34px; height: 40px; background: inherit; border-radius: 50% 50% 0 0; }
.card-beast:before { left: 7px; transform: rotate(-20deg); }
.card-beast:after { right: 7px; transform: rotate(20deg); }
.card-beast i { position: absolute; width: 7px; height: 7px; background: #f4ad8d; top: 36px; left: 34px; border-radius: 50%; }
.card-beast i + i { left: auto; right: 34px; }
.poster-note { position: absolute; bottom: 26px; text-align: center; width: 100%; font-size: 12px; font-family: Georgia, serif; font-style: italic; }

/* Nyam: quiet lavender and an architectural identity diagram. */
.nyam { --bg: #f4f3fa; --ink: #23233c; --muted: #626179; --accent: #5350aa; --line: #d6d4e5; --panel: #e7e5f2; --bright: #cdc5ff; }
.nyam .wordmark { letter-spacing: -1.6px; }
.nyam h1 { font-size: clamp(56px, 6.4vw, 86px); }
.permission-panel { background: #25253a; color: #f4f3fa; border-radius: 8px; padding: 30px; box-shadow: 0 24px 65px #24233c12; }
.panel-heading { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: 1.5px; border-bottom: 1px solid #ffffff26; padding-bottom: 23px; }
.panel-heading > span:last-child { margin-left: auto; font-size: 18px; line-height: 1; }
.panel-dot { width: 6px; height: 6px; border-radius: 50%; background: #ccc4ff; }
.permission-flow { padding-block: 30px; }
.permission-flow > div { display: flex; align-items: center; gap: 20px; }
.flow-index { border: 1px solid #7c759b; border-radius: 8px; padding: 10px 12px; font-size: 11px; color: #ccc4ff; }
.permission-flow p { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: #b1afc5; margin: 0; }
.permission-flow strong { display: block; font-size: 19px; font-weight: 400; letter-spacing: -.3px; text-transform: none; color: #f4f3fa; margin-top: 4px; }
.flow-connector { height: 30px; width: 1px; background: #7c759b; display: block; margin-left: 21px; }
.panel-footnote { border-top: 1px solid #ffffff26; padding-top: 20px; font-size: 10px; color: #b1afc5; }
.nyam .project-note { border-left: 3px solid var(--accent); }

/* Responsive layout and reduced-motion support. */
@media (min-width: 1500px) {
  .hero { padding-block: 110px; }
  .personal-art { max-width: 490px; justify-self: end; }
}
@media (max-width: 1000px) {
  .wrap { width: calc(100% - 64px); }
  .hero { gap: 36px; }
  h1 { letter-spacing: -3px; }
  .art-core { letter-spacing: -15px; }
  .art-core span { font-size: 55px; }
  .node-human { left: 6%; }
  .node-agent { right: 6%; }
  .identity-node { width: 105px; }
  .scope-ring { right: 0; width: 160px; }
  .project-hero { gap: 35px; }
  .animalia-poster { min-height: 410px; }
  .playing-card { width: 155px; height: 225px; top: 95px; }
  .animal-card { top: 128px; right: 4%; }
  .resource-card { left: 5%; }
  .card-beast { width: 105px; }
  .principle-grid { gap: 25px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 82px; }
  .wordmark { font-size: 25px; }
  nav { gap: 22px; font-size: 12px; }
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 55px 65px; }
  h1 { font-size: clamp(56px, 12vw, 82px); letter-spacing: -3px; }
  .hero-description { font-size: 17px; max-width: 520px; }
  .personal-art { width: min(100%, 420px); justify-self: center; }
  .art-core { font-size: 270px; letter-spacing: -20px; }
  .art-core span { font-size: 65px; }
  .section-heading { display: block; margin-bottom: 32px; }
  .section-heading > p { margin-top: 22px; }
  .project-grid { grid-template-columns: 1fr; gap: 28px; }
  .project-art { height: 280px; }
  .node-human { left: 12%; }
  .node-agent { right: 12%; }
  .scope-ring { right: 8%; width: 190px; }
  .scope-label { right: 14%; }
  .projects-section { padding-block: 40px 65px; }
  .project-copy { padding: 26px; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .about-section { padding-block: 48px 60px; }
  .about-grid .large-copy { font-size: 19px; }
  .site-footer { min-height: 150px; flex-wrap: wrap; gap: 20px; padding-block: 30px; }
  .site-footer p { order: 3; flex-basis: 100%; }
  .project-hero { padding-block: 55px 65px; }
  .animalia h1, .nyam h1 { font-size: clamp(56px, 11vw, 78px); }
  .animalia-poster { width: min(100%, 470px); min-height: 450px; justify-self: center; }
  .playing-card { width: 175px; height: 250px; top: 108px; }
  .resource-card { left: 10%; }
  .animal-card { right: 8%; top: 133px; }
  .card-beast { width: 120px; }
  .permission-panel { width: 100%; max-width: 500px; justify-self: center; }
  .principle-grid { grid-template-columns: 1fr; gap: 30px; }
  .principle-number { margin-bottom: 18px; }
  .idea-section { padding-block: 45px 60px; }
  .project-note { padding: 32px 26px; margin-bottom: 60px; }
  .animalia h2 { letter-spacing: -1.8px; }
}
@media (max-width: 380px) {
  nav { gap: 16px; }
  .hero h1 { font-size: 52px; }
  .art-core { font-size: 235px; }
  .identity-node { width: 95px; }
  .node-human { left: 6%; }
  .node-agent { right: 6%; }
  .scope-ring { right: 0; width: 155px; }
  .playing-card { width: 145px; height: 225px; }
  .resource-card { left: 5%; }
  .animal-card { right: 3%; }
  .card-beast { width: 105px; }
  .animalia-poster { min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Longer project names and headings keep their layout on smaller screens. */
.jevpersonas .hero h1 { font-size: clamp(46px, 4.9vw, 68px); letter-spacing: -2.6px; }
@media (max-width: 760px) {
  .jevpersonas .site-header { flex-wrap: wrap; gap: 12px; padding-block: 22px; }
  .jevpersonas .hero h1 { font-size: clamp(42px, 10vw, 64px); letter-spacing: -2px; }
}