/* Morgan Marler — page styles.
   Implements the "Morgan Marler" artboard on top of the Broadsheet design
   system (broadsheet.css). Every value here is carried over verbatim from
   the design; broadsheet.css stays untouched so it can keep tracking the
   design system upstream. */

:root {
  /* Spot color — the design's one "Look" control.
     cyan (the design's default) | magenta: var(--color-accent-2-600) */
  --spot: var(--color-accent);
}

body {
  margin: 0;
  background: var(--color-neutral-100);
}

a {
  color: var(--spot);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
a:hover { color: var(--color-accent); }

/* — page shell — */
.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 96px) clamp(22px, 6vw, 88px) clamp(56px, 9vw, 120px);
  background: var(--color-neutral-100);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* — masthead — */
.eyebrow {
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  font-style: italic;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.name {
  margin: clamp(16px, 2.5vw, 28px) 0 0;
  font-size: clamp(46px, 9.5vw, 118px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 600;
}

.lede {
  margin: clamp(20px, 3vw, 34px) 0 0;
  max-width: 26ch;
  font-size: clamp(25px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: pretty;
}

/* — intro: bio + portrait — */
.intro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(44px, 7vw, 92px);
}

.bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 46ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
}
.bio p { margin: 0; }

.portrait {
  margin: 0;
  width: 100%;
  max-width: 330px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 200px 200px 8px 8px;
  background: var(--color-neutral-200);
}
.portrait figcaption {
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* — four things that explain me — */
.facets { margin-top: clamp(56px, 9vw, 116px); }

.facet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(34px, 5vw, 68px) clamp(34px, 5vw, 84px);
  margin-top: clamp(24px, 3.5vw, 44px);
}

.facet {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44ch;
}
.facet .dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--spot);
}
.facet h3 {
  margin: 0;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.facet p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

/* — off the resume — */
.off-resume {
  margin-top: clamp(56px, 9vw, 116px);
  padding: clamp(28px, 4.5vw, 56px);
  background: var(--color-accent-100);
  border-radius: 28px;
}

.panel-label {
  margin: 0 0 var(--space-4);
  font-size: clamp(15px, 1.3vw, 18px);
  font-style: italic;
  color: var(--color-accent-800);
}

.off-resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6) clamp(32px, 5vw, 72px);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--color-accent-900);
}
.off-resume-grid p { margin: 0; }

/* — say hello — */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(56px, 9vw, 116px);
}

.contact-intro { max-width: 34ch; }
.contact-intro h2 {
  margin: 0 0 var(--space-3);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.contact-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.35;
}
.contact-links a { word-break: break-word; }