@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root, html, body {
  color-scheme: light !important;
  background: #faf9f6 !important;
  color: #213d4b !important;
  font-family: 'DM Sans', Arial, sans-serif !important;
}

/* Home: keep its original statement and project link, with the CV's calm palette. */
.landing {
  --landing-ink: #213d4b !important;
  --landing-paper: #213d4b !important;
  --landing-signal: #477489 !important;
  --landing-signal-soft: rgba(71,116,137,.16) !important;
  min-height: 100svh !important;
  place-items: center !important;
  background: linear-gradient(90deg, rgba(250,249,246,.83), rgba(250,249,246,.75)),
    url('engineering-sketches.png') center / cover no-repeat !important;
}
.landing .intro {
  width: min(100% - 3rem, 72rem) !important;
  padding: clamp(5rem,10vw,9rem) 0 !important;
}
.landing .intro::before {
  content: 'RUBÉN SORANDO  /  PROYECTOS';
  display: block;
  width: fit-content;
  margin-bottom: clamp(2rem,4vw,4rem);
  padding-bottom: .85rem;
  border-bottom: 1px solid #b9ccd1;
  color: #477489;
  font: 700 .75rem 'Manrope',sans-serif;
  letter-spacing: .17em;
}
.landing h1 {
  max-width: 19ch !important;
  color: #213d4b !important;
  font: 700 clamp(2.8rem,6.1vw,6rem)/1.08 'Manrope',Arial,sans-serif !important;
  letter-spacing: -.06em !important;
}
.project-link {
  margin-top: clamp(2.75rem,5vw,5rem) !important;
  padding: .95rem 1.25rem !important;
  background: #fffdf9 !important;
  border: 1px solid #cddcde !important;
  border-radius: .75rem !important;
  color: #213d4b !important;
  box-shadow: 0 12px 35px rgba(33,61,75,.06);
  font: 700 .9rem 'DM Sans',sans-serif !important;
  letter-spacing: 0 !important;
}
.project-link:hover,.project-link:focus-visible {
  color: #356a82 !important;
  border-color: #477489 !important;
  background: #f3f7f6 !important;
}
.arrow { color: #477489 !important; }
.landing .orbit { display: none !important; }
.landing .grain { opacity: .04 !important; }

/* Blog: the original content, cards, filters and anchors remain in place. */
.site-shell {
  --ink: #ffffff !important;
  --ink-soft: #f1f6f5 !important;
  --paper: #213d4b !important;
  --muted: #5d707b !important;
  --line: #d4e0e2 !important;
  --blue: #477489 !important;
  --orange: #6f92a0 !important;
  --green: #79a78d !important;
  color: #213d4b !important;
  background: #faf9f6 !important;
  font-family: 'DM Sans',Arial,sans-serif !important;
}
.site-header {
  padding-block: 1.45rem !important;
  border-color: #d4e0e2 !important;
}
.wordmark {
  color: #213d4b !important;
  font: 800 1.05rem 'Manrope',sans-serif !important;
  letter-spacing: -.035em !important;
}
.site-header nav a,.alternative-link { color: #5d707b !important; }
.site-header nav a:hover,.site-header nav a:focus-visible,
.alternative-link:hover,.alternative-link:focus-visible { color: #356a82 !important; }
.hero {
  min-height: 31rem !important;
  padding-block: clamp(5rem,9vw,8rem) !important;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -8vw;
  background: linear-gradient(90deg,rgba(250,249,246,.75),rgba(250,249,246,.48)),
    url('engineering-sketches.png') center / cover no-repeat;
  opacity: .7;
  pointer-events: none;
}
.eyebrow { color: #477489 !important; font: 700 .7rem 'Manrope',sans-serif !important; letter-spacing: .15em !important; }
.hero h1 {
  max-width: 17ch !important;
  margin-bottom: 1.6rem !important;
  color: #213d4b !important;
  font: 700 clamp(2.8rem,5vw,5.6rem)/1.08 'Manrope',sans-serif !important;
  letter-spacing: -.055em !important;
}
.hero-intro {
  max-width: 43rem !important;
  color: #526873 !important;
  font-size: clamp(1.02rem,1.4vw,1.18rem) !important;
}
.hero-mark { opacity: .55 !important; transform: scale(.75); transform-origin: bottom right; }
.hero-mark__dot { background: #477489 !important; box-shadow: none !important; }
.hero-mark__arc { border-color: #9ab5be #9ab5be #9ab5be transparent !important; }
.projects-section { padding-bottom: 6rem !important; }
.section-heading,.about-section,.upcoming,footer { border-color: #d4e0e2 !important; }
.site-shell h2 {
  color: #213d4b !important;
  font: 700 clamp(2rem,4vw,3.6rem)/1.1 'Manrope',sans-serif !important;
  letter-spacing: -.05em !important;
}
.project-count { color: #748893 !important; }
.filters button {
  color: #526873 !important;
  background: #fffdfb !important;
  border-color: #cddcde !important;
  font: 600 .78rem 'DM Sans',sans-serif !important;
}
.filters button:hover,.filters button:focus-visible,.filters button.is-active {
  color: #fff !important;
  background: #477489 !important;
  border-color: #477489 !important;
}
.project-grid {
  gap: 1.1rem !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
}
.project-card,.project-card--featured {
  min-height: 21rem !important;
  padding: clamp(1.4rem,2.3vw,2.2rem) !important;
  background: #fffdfb !important;
  border: 1px solid #d4e0e2 !important;
  border-radius: 1rem !important;
  box-shadow: 0 12px 35px rgba(33,61,75,.045);
}
.project-card--featured {
  min-height: 22rem !important;
  background: linear-gradient(110deg,#edf4f3,#fffdfb 60%) !important;
}
.project-card:hover {
  background: #f2f7f6 !important;
  border-color: #abc3ca !important;
  transform: translateY(-2px) !important;
}
.card-body { padding-block: 2.3rem !important; }
.card-body h3 {
  color: #213d4b !important;
  font: 700 clamp(1.4rem,2.3vw,2.15rem)/1.15 'Manrope',sans-serif !important;
  letter-spacing: -.04em !important;
}
.card-body p { color: #5d707b !important; }
.card-topline .card-index,.status,.alternative-link { color: #667e89 !important; }
.category-label,.visit-link span { color: #477489 !important; }
.card-footer { border-color: #d4e0e2 !important; }
.visit-link { color: #28546a !important; }
.about-section > p:last-child { color: #526873 !important; }
.upcoming h2 { color: #71858d !important; }
footer { color: #70838b !important; }
.site-shell a:focus-visible,.site-shell button:focus-visible { outline-color: #477489 !important; }
@media(max-width:720px) {
  .landing .intro { width: min(100% - 2.2rem,72rem) !important; padding-block: 5rem !important; }
  .landing h1 { max-width: 16ch !important; font-size: clamp(2.6rem,10vw,4.2rem) !important; }
  .hero { min-height: auto !important; padding-block: 5rem 5.5rem !important; }
  .hero h1 { max-width: 16ch !important; font-size: clamp(2.6rem,9vw,4rem) !important; }
  .hero-mark { display: none !important; }
  .project-grid { gap: .9rem !important; }
  .project-card,.project-card--featured { min-height: 19rem !important; }
}