/* ideas-page.css: component-owned rules. Shared priority order is declared in tokens.css. */
@layer presentation {
/* ideas-page */
.ideas-page main {
  font-size: var(--font-16);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: .01em;
}

.ideas-page main img {
  height: auto;
}

.ideas-page main p {
  line-height: 1.9;
}

.ideas-page main .kicker {
  font-size: var(--font-13);
  letter-spacing: .04em;
}

.ideas-page main h2 {
  font-size: clamp(var(--font-27),2.5vw,var(--font-36));
  line-height: 1.65;
  letter-spacing: .025em;
}

.ideas-page main figcaption {
  font-size: var(--font-13);
  color: var(--muted);
  margin-top: var(--space-12);
}

.ip-hero {
  padding: var(--space-42) 0 var(--space-95);
}

.ip-hero h1 {
  margin: var(--space-20) 0 var(--space-38);
  font-size: clamp(var(--font-40),4.2vw,var(--font-62));
  line-height: 1.55;
}

.ip-hero h1 span {
  display: block;
}

.ip-hero figure {
  width: 91%;
  margin-left: auto;
}

.ip-hero figure img {
  aspect-ratio: 1.9;
  object-position: center;
}

.ip-intro {
  max-width: 51ch;
  margin: var(--space-35) 8% 0 auto;
}

.ip-view {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 9%;
  align-items: center;
  padding: 0 0 var(--space-100);
}

.ip-view h2 {
  margin: var(--space-16) 0 var(--space-28);
}

.ip-view figure img {
  aspect-ratio: 1.08;
  object-position: 62% center;
}

.ip-view>div {
  max-width: 46ch;
}

.ip-light {
  padding: var(--space-15) 0 var(--space-95);
}

.ip-light-heading {
  margin: 0 0 var(--space-32) 8%;
}

.ip-light h2 {
  margin-top: var(--space-16);
}

.ip-light figure img {
  aspect-ratio: 1.95;
  object-position: center;
}

.ip-light-copy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  max-width: 1040px;
  margin: var(--space-32) 0 0 auto;
}

.ip-light-copy p+p {
  margin: 0;
}

.ip-approach {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10%;
  padding: var(--space-60) 0 var(--space-85);
  border-top: 1px solid var(--line);
}

.ip-approach h2 {
  margin-top: var(--space-16);
}

.ip-approach>div:last-child {
  max-width: 51ch;
}

.ip-approach .line-link {
  font-size: var(--font-15);
  min-height: 44px;
}

.ip-statement {
  padding: var(--space-40) 8% var(--space-90);
}

.ip-statement h2 {
  margin: var(--space-20) 0 var(--space-32);
}

.ip-statement>div {
  max-width: 53ch;
  margin-left: auto;
}

.ip-contact {
  padding: var(--space-55) 0 var(--space-35);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8%;
  align-items: center;
}

.ip-contact h2 {
  margin-bottom: var(--space-24);
}

.ip-contact .solid-link {
  width: 100%;
  max-width: 390px;
  min-height: 68px;
  font-size: var(--font-16);
}

.ip-note,
.ip-disclaimer {
  font-size: var(--font-14);
  color: var(--muted);
  line-height: 1.9;
}

.ip-note {
  margin-top: var(--space-19);
  max-width: 42ch;
}

.ip-disclaimer {
  padding-bottom: var(--space-45);
  max-width: 90ch;
}

.ideas-page main a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: var(--space-5);
}

/* ideas-page */
@media(max-width:1024px) {
.ip-view {
  gap: 6%;
}

.ip-view figure img {
  aspect-ratio: .9;
}

.ip-contact {
  gap: 5%;
}

.ip-statement {
  padding-left: 4%;
  padding-right: 4%;
}
}

/* ideas-page */
@media(max-width:700px) {
.ideas-page main {
  font-size: var(--font-16);
}

.ideas-page main h2 {
  font-size: var(--font-27);
}

.ip-hero {
  padding: var(--space-32) 0 var(--space-50);
}

.ip-hero h1 {
  font-size: var(--font-32);
  letter-spacing: .015em;
  margin: var(--space-18) 0 var(--space-28);
}

.ip-hero figure {
  width: 100%;
  margin: 0;
}

.ip-hero figure img {
  aspect-ratio: 1.22;
  object-position: 65% center;
}

.ip-intro {
  margin: var(--space-27) 0 0;
  max-width: none;
}

.ip-view {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-28);
  padding: var(--space-5) 0 var(--space-52);
}

.ip-view figure {
  width: 91%;
  align-self: flex-end;
}

.ip-view figure img {
  aspect-ratio: 1.12;
}

.ip-view>div {
  max-width: none;
}

.ip-view h2 {
  margin: var(--space-14) 0 var(--space-24);
}

.ip-light {
  padding: var(--space-5) 0 var(--space-50);
}

.ip-light-heading {
  margin: 0 0 var(--space-25);
}

.ip-light figure {
  margin: 0 -3vw;
}

.ip-light figure img {
  aspect-ratio: 1.15;
  object-position: 64% center;
}

.ip-light figcaption {
  margin-left: 3vw;
}

.ip-light-copy {
  display: block;
  margin: var(--space-27) 0 0;
}

.ip-light-copy p+p {
  margin-top: var(--space-20);
}

.ip-approach {
  display: block;
  padding: var(--space-38) 0 var(--space-46);
}

.ip-approach h2 {
  margin: var(--space-14) 0 var(--space-26);
}

.ip-approach h2 br {
  display: none;
}

.ip-approach>div:last-child {
  max-width: none;
}

.ip-statement {
  padding: var(--space-15) 0 var(--space-48);
}

.ip-statement h2 {
  margin: var(--space-16) 0 var(--space-26);
}

.ip-statement h2 br {
  display: none;
}

.ip-contact {
  display: block;
  padding: var(--space-38) 0 var(--space-28);
}

.ip-contact h2 {
  text-wrap: balance;
}

.ip-contact h2 br,
.ip-contact p br {
  display: none;
}

.ip-contact .solid-link {
  max-width: none;
  margin-top: var(--space-26);
}

.ip-note {
  max-width: none;
}

.ip-disclaimer {
  padding-bottom: var(--space-35);
}

.ideas-page main figcaption {
  font-size: var(--font-13);
}
}

/* ideas-page */
@media(max-width:360px) {
.ip-hero h1 {
  font-size: var(--font-27);
}

.ideas-page main h2 {
  font-size: var(--font-24);
}
}

/* ideas-page */
.ip-intro {
  max-width: 48ch;
}

.ip-intro p+p,
.ip-view>div>p+p,
.ip-approach>div:last-child>p+p,
.ip-statement>div>p+p {
  margin-top: var(--space-18);
}

.ip-light-copy {
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-18) 7%;
}

.ip-light-copy>p:first-child {
  grid-column: 1;
  grid-row: 1;
}

.ip-light-copy>p:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.ip-light-copy>p:nth-child(3) {
  grid-column: 2;
  grid-row: 1/3;
  align-self: start;
}

.ip-approach {
  padding-bottom: var(--space-68);
}

.ip-statement {
  padding-top: var(--space-30);
  padding-bottom: var(--space-70);
}

.ip-statement>div {
  max-width: 49ch;
}

.ip-contact>div>p:not(.ip-note) {
  max-width: 48ch;
}

/* ideas-page */
@media(max-width:700px) {
.ip-intro {
  max-width: none;
}

.ip-light-copy {
  display: block;
}

.ip-light-copy p+p {
  margin-top: var(--space-18);
}

.ip-approach {
  padding-bottom: var(--space-40);
}

.ip-approach h2 br {
  display: block;
}

.ip-statement {
  padding-top: var(--space-18);
  padding-bottom: var(--space-42);
}

.ip-statement h2 br {
  display: block;
}

.ip-statement>div {
  max-width: none;
}

.ip-contact h2 br {
  display: block;
}

.ip-contact>div>p+p {
  margin-top: var(--space-18);
}
}

/* phase1 */
.ip-view h2 {
  max-width: none;
}
}

@layer constraints {
/* ideas-page */
.ip-statement h2 {
  font-size: clamp(var(--font-30),3vw,var(--font-43));
}

.ip-contact h2 {
  font-size: clamp(var(--font-26),2.1vw,var(--font-31));
}

/* ideas-page */
@media(max-width:700px) {
.ip-statement h2 {
  font-size: var(--font-28);
}

.ip-contact h2 {
  font-size: var(--font-25);
}
}

/* ideas-page */
@media(max-width:360px) {
.ip-statement h2 {
  font-size: var(--font-25);
}

.ip-contact h2 {
  font-size: var(--font-23);
}
}

/* ideas-page */
@media(prefers-reduced-motion:reduce) {
.ideas-page main * {
  transition: none;
  animation: none;
}
}

/* ideas-page */
@media(max-width:700px) {
.ip-statement h2 {
  font-size: var(--font-26);
}

.ip-contact h2 {
  font-size: var(--font-25);
}
}

/* ideas-page */
@media(max-width:360px) {
.ip-statement h2 {
  font-size: var(--font-23);
}

.ip-contact h2 {
  font-size: var(--font-22);
}
}
}

