/* Your Citadel: an individual place to think, in forest green. */
body.personal-site {
  --paper: #182923;
  --surface: #2b4635;
  --ink: #eee9d8;
  --secondary: #bac5ad;
  --line: #46594a;
  --accent: #b7ce91;
  color-scheme: dark;
}
.personal-site .shell { max-width: 1120px; }
.personal-site .site-header { min-height: 112px; }
.personal-site .brand { font-size: 29px; }
.personal-site h2, .personal-site h3 {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.personal-site em { font-family: var(--display); font-weight: 400; }
.personal-site p { text-wrap: pretty; }
.personal-hero {
  text-align: center;
  padding: 69px 0 77px;
}
.personal-hero .eyebrow { color: var(--secondary); font-size: 11px; }
.personal-hero h1 {
  margin: 25px 0 29px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(3.8rem, 6.8vw, 6.35rem);
  letter-spacing: -.045em;
  line-height: 1.06;
}
.personal-hero h1 em { color: #c6d7b3; }
.personal-lede {
  max-width: 620px;
  margin-inline: auto;
  font-size: 19px;
  line-height: 1.75;
  color: var(--secondary);
}
.personal-invitation { margin-top: 25px; gap: 16px; font-size: 12px; }
.personal-ideas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 51px;
  padding-block: 43px 70px;
  border-top: 1px solid var(--line);
}
.personal-ideas h2 { font-size: 32px; min-height: 2.35em; }
.personal-ideas p { margin-top: 20px; font-size: 16px; line-height: 1.75; color: var(--secondary); }
.personal-agency {
  padding: 61px 72px 67px;
  background: var(--surface);
  border: 1px solid #4c6950;
  border-radius: 8px 8px 66px 8px;
}
.agency-intro { max-width: 630px; margin-inline: auto; text-align: center; }
.agency-intro h2 { font-size: 52px; }
.agency-intro p { color: var(--secondary); font-size: 18px; line-height: 1.75; margin-top: 25px; }
.agency-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 55px; margin-top: 45px; }
.agency-choices section { padding-top: 25px; border-top: 1px solid #4c604e; }
.agency-choices h3 { font-size: 28px; margin: 0; }
.agency-choices p { font-size: 16px; line-height: 1.75; color: var(--secondary); margin-top: 15px; }
.personal-together {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: start;
  gap: 105px;
  padding-block: 85px 80px;
}
.together-story { padding-top: 10px; }
.together-story h2 { font-size: 60px; }
.together-story h2 em { color: #c6d7b3; }
.together-story > p { margin-top: 27px; max-width: 30em; font-size: 17px; line-height: 1.8; color: var(--secondary); }
.together-story .practical-note {
  padding-top: 21px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  max-width: 36em;
}
.personal-join {
  background: #223b2d;
  padding: 30px 32px 21px;
  border: 1px solid var(--line);
  border-radius: 8px 8px 40px 8px;
  scroll-margin-top: 28px;
}
.personal-join h2 { font-size: 35px; }
.personal-join > p { margin-top: 17px; font-size: 15px; line-height: 1.8; color: var(--secondary); }
.personal-join .contact-form { margin-top: 25px; }
.personal-site .contact-form input { border-color: #65745f; }
.personal-site .submit-button { background: #b7ce91; border-color: #b7ce91; color: #182923; border-radius: 3px; }
.personal-site .submit-button:hover { background: #c8dcaa; border-color: #c8dcaa; }
.personal-site .form-done { font-size: 16px; }
.personal-site .form-done .contact-form { margin-top: 15px; }
.personal-site .form-done .submit-button { background: transparent; color: var(--ink); border-color: var(--line); font-size: 10px; }
.personal-site .site-footer { padding-block: 29px 38px; }
.plain-files { font-family: var(--mono); }

@media (max-width: 1000px) {
  .personal-hero { padding-top: 53px; }
  .personal-hero h1 { font-size: clamp(3.8rem, 8vw, 5.8rem); }
  .personal-ideas { gap: 31px; }
  .personal-ideas h2 { font-size: 28px; }
  .personal-agency { padding-inline: 42px; }
  .personal-together { gap: 50px; grid-template-columns: 1fr 1fr; }
  .together-story h2 { font-size: 52px; }
  .personal-join { padding-inline: 24px; }
}
@media (max-width: 700px) {
  .personal-site .site-header { min-height: 90px; }
  .personal-site .brand { font-size: 27px; }
  .personal-hero { padding: 36px 0 52px; }
  .personal-hero .eyebrow { font-size: 10px; }
  .personal-hero h1 { margin: 24px 0; font-size: clamp(2.8rem, 11vw, 4.1rem); line-height: 1.12; letter-spacing: -.035em; }
  .personal-lede { max-width: 32em; font-size: 16px; line-height: 1.8; }
  .personal-invitation { margin-top: 21px; font-size: 11px; }
  .personal-ideas { display: block; padding-block: 0 33px; border: 0; }
  .personal-ideas section { border-top: 1px solid var(--line); padding-block: 27px 28px; }
  .personal-ideas h2 { font-size: 30px; min-height: auto; max-width: 19ch; }
  .desktop-break { display: none; }
  .personal-ideas p { margin-top: 15px; font-size: 15px; line-height: 1.8; }
  .personal-agency { padding: 36px 25px 37px; border-radius: 6px 6px 38px 6px; }
  .agency-intro { text-align: left; }
  .agency-intro h2 { font-size: 37px; line-height: 1.14; }
  .agency-intro p { font-size: 16px; margin-top: 20px; }
  .agency-choices { display: block; margin-top: 25px; }
  .agency-choices section { padding-top: 23px; margin-top: 25px; }
  .agency-choices h3 { font-size: 26px; }
  .agency-choices p { font-size: 15px; margin-top: 12px; }
  .personal-together { display: block; padding-block: 47px 48px; }
  .together-story { padding: 0; }
  .together-story h2 { font-size: 43px; }
  .together-story > p { font-size: 16px; margin-top: 20px; }
  .together-story .practical-note { margin-top: 23px; padding-top: 17px; font-size: 10px; }
  .personal-join { margin-top: 35px; padding: 25px 24px 16px; border-radius: 6px 6px 32px 6px; }
  .personal-join h2 { font-size: 32px; }
  .personal-join > p { font-size: 15px; margin-top: 15px; }
  .personal-join .contact-form { margin-top: 22px; }
  .personal-site .site-footer { padding-block: 25px 32px; }
}
@media (max-width: 380px) {
  .personal-hero h1 { font-size: 43px; }
  .personal-site .brand { font-size: 25px; }
  .personal-site .personal-link { max-width: none; }
  .personal-site .header-right { gap: 0; }
  .personal-agency { padding-inline: 21px; }
  .agency-intro h2 { font-size: 33px; }
  .personal-join { padding-inline: 21px; }
}
@media print {
  body.personal-site { --ink: #172a20; --secondary: #405147; --line: #b0b9af; --accent: #304837; }
  .personal-site .site-header { min-height: 40px; }
  .personal-hero { padding-block: 15px 25px; }
  .personal-hero h1 { font-size: 42pt; }
  .personal-hero h1 em, .together-story h2 em { color: var(--ink); }
  .personal-lede { font-size: 11pt; }
  .personal-invitation { display: none; }
  .personal-ideas { padding-block: 20px 25px; gap: 25px; }
  .personal-ideas h2 { font-size: 20pt; }
  .personal-ideas p, .agency-choices p { font-size: 10pt; }
  .personal-agency, .personal-join { background: transparent; border: 1px solid var(--line); border-radius: 0; padding: 25px; break-inside: avoid; }
  .agency-intro h2 { font-size: 30pt; }
  .agency-intro p { font-size: 11pt; margin-top: 17px; }
  .agency-choices { margin-top: 23px; gap: 30px; }
  .agency-choices h3 { font-size: 19pt; }
  .personal-together { padding-block: 25px; gap: 35px; }
  .together-story h2 { font-size: 30pt; }
  .together-story > p, .personal-join > p { font-size: 10pt; }
  .personal-join h2 { font-size: 25pt; }
  .personal-site .site-footer { padding-block: 15px; }
}