/* ============ GRAFFT WAYS WIDGET ============ */
.grafft-ways{
  padding: 110px 0;
  --ways-bg: #1C1B19;
  --ways-text: #FFFDF9;
  --ways-heading-color: #FFFDF9;
  --ways-header-color: rgba(255,253,249,.55);
  --ways-considered-accent: #8B7355;
  --ways-row-text: rgba(255,253,249,.78);
  --ways-row-border: rgba(255,253,249,.12);
  --ways-header-border: rgba(255,253,249,.2);
  --ways-considered-bg: rgba(139,115,85,.1);
  --ways-considered-border: rgba(139,115,85,.35);
  --ways-mono: 'IBM Plex Mono', monospace;
  --ways-serif: 'Fraunces', serif;

  background: var(--ways-bg);
  color: var(--ways-text);
}
.grafft-ways *{ box-sizing: border-box; }

.grafft-ways h2{
  font-family: var(--ways-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ways-heading-color);
  max-width: 680px;
  margin-bottom: 56px;
}

.grafft-ways .ways-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.grafft-ways .way-card{
  display: flex;
  flex-direction: column;
  padding: 32px 26px;
  border: 1px solid var(--ways-row-border);
}
.grafft-ways .way-title{
  font-family: var(--ways-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ways-header-color);
  margin-bottom: 16px;
}
.grafft-ways .way-subtitle{
  font-family: var(--ways-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ways-text);
  margin: 0 0 14px;
}
.grafft-ways .way-body{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ways-row-text);
  margin: 0;
}
.grafft-ways .way-card.considered{
  background: var(--ways-considered-bg);
  border-color: var(--ways-considered-border);
}
.grafft-ways .way-card.considered .way-title{
  color: var(--ways-considered-accent);
}
.grafft-ways .way-card.considered .way-subtitle{
  color: var(--ways-considered-accent);
}

@media(max-width: 820px){
  .grafft-ways .ways-cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}