/* Typography and sound-led graphics for the portfolio. */
#hero {
  min-height: min(780px, calc(100svh - 90px));
  padding: 8rem 2rem 3.5rem;
  text-align: center;
  background: radial-gradient(ellipse 95% 90% at 50% 0%, rgba(53, 51, 205, .31) 0%, rgba(53, 51, 205, .13) 42%, transparent 78%), linear-gradient(180deg, #08081b 0%, #0b0b25 48%, #080909 100%);
}
#hero::after { display: none; }
body > header,
body > header.site-header,
body > header.site-header.is-scrolled {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:not(:has(#hero)) {
  background-color: #101126;
  background-image: linear-gradient(160deg, #17163c 0%, #101126 42%, #11132e 72%, #19173b 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
body:not(:has(#hero)) > section:not(.contact-overlay),
body:not(:has(#hero)) > main > section,
body:not(:has(#hero)) > footer,
body:not(:has(#hero)) .dept-hero {
  background: transparent;
  border-block: 0;
}
body:not(:has(#hero)) .hero::before,
body:not(:has(#hero)) .hero::after { display: none; }
body:not(:has(#hero)) .ai { color: var(--bone); }
body:not(:has(#hero)) .ai-footnote { color: var(--muted); }
body:not(:has(#hero)):has(.dept-hero) {
  background-color: #080909;
  background-image: none;
}
body:not(:has(#hero)):has(.dept-hero) .dept-hero {
  background: linear-gradient(180deg, #17163c 0%, #111329 72%, #080909 100%);
}
body:not(:has(#hero)):has(.dept-hero) > footer {
  background: linear-gradient(180deg, #080909 0%, #111329 60%, #19173b 100%);
}
#services .service-card {
  padding: 1.75rem 0;
  min-height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
}
#services .service-card__number { margin-bottom: .85rem; font-size: 11px; }
#services .service-card__title { font-size: 32px; line-height: 1.15; margin-bottom: .85rem; }
#services .service-card__copy { max-width: 45ch; font-size: 16px; line-height: 1.65; margin-bottom: 1.5rem; }
#services .service-card__tags { display: none; }
@media (min-width: 900px) {
  .work-pillars .work-pillar { display: flex; flex-direction: column; min-width: 0; }
  .work-pillars .work-pillar-sub { min-height: 3.5em; }
}
.music-card__meta a { color: inherit; text-decoration: underline; text-decoration-color: rgba(199,146,87,.6); text-underline-offset: 3px; }
.music-card__meta a:hover { color: var(--bone); }
.music-card__meta a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
#hero #waveCanvas { display: block; opacity: .7; }
#hero .hero-content { max-width: 1200px; }
#hero .hero-title { max-width: none; font-size: 72px; margin: 0 0 1.75rem; line-height: 1.03; }
#hero .hero-title .dept-line--accent { font-size: 100px; line-height: .98; margin: 0; }
#hero .hero-title .dept-line--gradient {
  background: linear-gradient(100deg, var(--bone), #e8dcc4 45%, var(--amber));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#hero .hero-dept-sub { margin: 0 auto 2rem; max-width: 48ch; color: var(--muted); }
#hero .hero-meta { justify-content: center; align-items: center; }
.service-card:has(.service-graphic) {
  padding: 0 1.5rem 1.5rem;
  min-height: 0;
  background: #111312;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.service-graphic {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  aspect-ratio: 2.3 / 1;
  height: auto;
  margin: 0 -1.5rem 1.5rem;
  background: #101211;
  border-bottom: 1px solid var(--line);
}
.service-card:has(.service-graphic) .service-card__number { margin-bottom: .85rem; font-size: 11px; }
.service-card:has(.service-graphic) .service-card__title { font-size: 32px; line-height: 1.1; margin-bottom: .75rem; }
.service-card:has(.service-graphic) .service-card__copy { max-width: 48ch; font-size: 16px; line-height: 1.5; margin-bottom: 1.5rem; color: #c2c0b9; }
.service-card:has(.service-graphic) .service-card__tags { display: none; }
.footer-social { gap: 1.3rem; align-items: center; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #aaa8a1; }
.footer-social a svg { width: 16px; height: 16px; fill: currentColor; }
.footer-social .footer-cda-icon { display: block; width: 25px; height: 25px; background: currentColor; -webkit-mask: url('/assets/entrance-casadelarbol.svg') center / contain no-repeat; mask: url('/assets/entrance-casadelarbol.svg') center / contain no-repeat; }
.footer-social a:hover { color: var(--bone); }
.footer-social a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.skip-content { position: fixed; top: .5rem; left: 1rem; z-index: 10000; padding: .75rem 1rem; background: var(--bone); color: var(--bg); transform: translateY(-160%); }
.skip-content:focus { transform: translateY(0); }
.editorial-notes .section-header { align-items: end; }
.editorial-notes .section-header > a { color: var(--muted); font-size: 14px; }
.notes-links { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.notes-links > a { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--line); padding: 0 0 1.5rem; gap: 1rem; }
.notes-links > a > span:first-child { grid-column: span 2; font-family: var(--font-mono); font-size: 11px; color: var(--amber); }
.notes-links h3 { font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 400; }
.notes-links a:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
.dept-hero {
  position: relative;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  padding-top: 9rem;
  background: linear-gradient(135deg, #0d1029 0%, #101326 44%, #080909 100%);
}
.dept-hero h1 { max-width: 21ch; font-size: 56px; letter-spacing: 0; }
.dept-hero .dept-hero-lead { max-width: 48ch; font-size: 18px; color: #c2c0b9; }
.visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visual-card:has(.service-graphic) { min-height: 0; padding: 0 1.5rem 1.75rem; background: #111312; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.visual-card:has(.service-graphic) .visual-card__number { margin-bottom: .85rem; font-size: 11px; }
.visual-card:has(.service-graphic) .visual-card__title { font-size: 30px; line-height: 1.1; margin-bottom: .8rem; }
.visual-card:has(.service-graphic) .visual-card__copy { font-size: 16px; line-height: 1.6; margin-bottom: 1.5rem; }
.visual-card:has(.service-graphic) .visual-card__tags { position: static; margin-top: auto; font-size: 10px; }

.worlds-page { max-width: 1400px; margin: auto; padding: 10rem 4rem 6rem; }
.worlds-page__intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
.worlds-page__intro h1 { font-family: var(--font-serif); font-size: 80px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.worlds-page__intro p { font-size: 18px; color: var(--muted); max-width: 38ch; line-height: 1.6; }
.worlds-page .other-worlds-overlay__projects { padding-top: 4rem; gap: 5rem; }
.worlds-page .other-world--featured { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 3rem 4rem; padding: 2rem 0 4rem; border-bottom: 1px solid var(--line); }
.worlds-page .casa-symbol { width: 160px; height: 200px; object-fit: contain; filter: brightness(0) invert(.88); grid-row: span 2; align-self: center; }
.worlds-page .other-world__heading { min-width: 0; }
.worlds-page .casa-wordmark { width: min(100%, 650px); height: auto; display: block; filter: brightness(0) invert(.88); }
.worlds-page .other-world--featured .other-world__copy { grid-column: 2; max-width: 52ch; }
.worlds-page .other-world__category { display: block; margin-bottom: 1.25rem; }
.worlds-page .other-world--secondary { padding: 0; width: 100%; gap: 4rem; grid-template-columns: 1fr 1fr; }
.worlds-page .other-world--secondary .other-world__media { grid-column: 1; grid-row: 1; aspect-ratio: 4/3; }
.worlds-page .other-world--secondary .other-world__copy { grid-column: 2; grid-row: 1; }
.worlds-page .other-world__media img { opacity: 1; transform: none; }
.worlds-page .other-world__media::before { content: none; }
.worlds-page .other-world--minor { width: 100%; margin: 0; padding: 3rem 0 0; gap: 4rem; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.worlds-page .other-world--minor .other-world__media { max-width: 360px; aspect-ratio: 1; }
.worlds-page .other-world__description { font-size: 18px; line-height: 1.6; }
.worlds-page .other-world__link { margin-top: 1.25rem; display: inline-flex; }
.worlds-page .other-world__link:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
@media (min-width: 1600px) {
  #hero .hero-title { font-size: 88px; }
  #hero .hero-title .dept-line--accent { font-size: 118px; }
}
@media (max-width: 1000px) {
  #hero .hero-title { font-size: 52px; }
  #hero .hero-title .dept-line--accent { font-size: 76px; }
  .worlds-page { padding-inline: 2rem; }
  .worlds-page__intro h1 { font-size: 64px; }
}
@media (max-width: 600px) {
  .visual-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .dept-hero h1 { font-size: 36px; }
  .dept-hero .dept-hero-lead { font-size: 16px; }
  .notes-links { grid-template-columns: 1fr; gap: 2rem; }
  #hero { min-height: min(690px, calc(100svh - 90px)); padding: 7rem 1.25rem 3rem; }
  #hero .hero-title { font-size: 32px; line-height: 1.1; }
  #hero .hero-title .dept-line--accent { font-size: 49px; line-height: 1.08; }
  #hero .hero-dept-sub { max-width: 31ch; font-size: 16px; }
  .service-card:has(.service-graphic) .service-card__title { font-size: 28px; }
  .worlds-page { padding: 8rem 1.5rem 3rem; }
  .worlds-page__intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .worlds-page__intro h1 { font-size: 54px; }
  .worlds-page .other-world--featured { grid-template-columns: 1fr; gap: 1.5rem; }
  .worlds-page .casa-symbol { width: 100px; height: 120px; grid-row: auto; }
  .worlds-page .other-world--featured .other-world__copy { grid-column: 1; }
  .worlds-page .other-world--secondary, .worlds-page .other-world--minor { grid-template-columns: 1fr; gap: 2rem; }
  .worlds-page .other-world--secondary .other-world__copy { grid-column: 1; grid-row: 2; }
}
@media (max-width: 360px) {
  #hero .hero-title { font-size: 27px; }
  #hero .hero-title .dept-line--accent { font-size: 42px; }
}