:root {
  color-scheme: dark;
  --red: #ad2529;
  --red-light: #ff9090;
  --canvas: #242426;
  --panel: #2d2d30;
  --ink: #f8f6f3;
  --muted: #c5c3c2;
  --line: #48484c;
  --gutter: clamp(1rem, 4vw, 4.5rem);
  --display: "Instrument Serif", Georgia, serif;
  font: 16px/1.6 "Inter", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--red-light); outline-offset: 4px; }
h1, h2, p, figure, dl, dd { margin: 0; }
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus { position: absolute; z-index: 3; top: .75rem; left: .75rem; padding: .5rem .75rem; background: #161617; }

.intro { display: flex; flex-direction: column; min-height: 100svh; }
.intro-stage {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  min-height: min(78svh, 48rem);
  padding: clamp(3rem, 9vh, 8rem) var(--gutter);
  background: linear-gradient(110deg, #f3f0eb 12%, #e2e0dd 57%, #969698 100%);
  border-bottom: clamp(.45rem, 1vw, .85rem) solid var(--red);
  color: #222224;
  overflow: hidden;
}
.intro-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: min(34%, 16rem);
  background: url("media/clasico/cadiz-trazo.png") left bottom / auto 100% no-repeat;
  opacity: .72;
  pointer-events: none;
}
.intro-copy { position: relative; z-index: 1; padding-block: 1rem; }
.intro-origin {
  margin-bottom: clamp(.8rem, 2.5vh, 1.5rem);
  color: #7a2526;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.intro-logo img { width: min(100%, 43rem); height: auto; }
.intro-description { margin-top: 1.05rem; color: #3d3d40; font-size: clamp(1rem, 2vw, 1.36rem); }
.intro-nav { margin-top: 1.8rem; }
.intro-nav a {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  background: #922226;
  color: #fff;
  padding: .75rem 1.1rem;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.intro-nav a:hover { background: #75191c; }
.intro-nav span { font-size: 1.16em; }
.intro-portrait {
  position: relative;
  align-self: end;
  justify-self: end;
  width: min(100%, 34rem);
  height: auto;
  margin-bottom: calc(-1 * clamp(3rem, 9vh, 8rem));
  filter: drop-shadow(0 0 2rem #30303333);
}
.intro-credits {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  padding: clamp(1.1rem, 3.5vh, 2rem) var(--gutter);
  color: var(--muted);
  font-size: .8rem;
}

.site { display: none; flex-direction: column; min-height: 100svh; }
body:has(.screen:target) .intro { display: none; }
body:has(.screen:target) .site { display: flex; }
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 3rem;
  padding: 1rem var(--gutter);
  border-bottom: 3px solid var(--red);
  background: linear-gradient(115deg, #f3f0eb, #d8d6d4);
  color: #27272a;
}
.masthead { display: block; flex: 0 1 15rem; }
.masthead img { width: 100%; height: auto; }
.primary { display: flex; flex-wrap: wrap; gap: .3rem clamp(.7rem, 2vw, 1.8rem); }
.nav-link { text-decoration: none; }
.primary .nav-link { padding: .45rem 0; font-size: .9rem; font-weight: 600; border-bottom: 2px solid transparent; }
.primary .nav-link:hover, .primary .nav-link[aria-current] { color: #831e22; border-color: #ad2529; }
.site-header :focus-visible, .intro-stage :focus-visible { outline-color: #831e22; }

main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 4rem);
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 3.4rem) var(--gutter);
}
main:has(.screen[data-group]:target) { grid-template-columns: clamp(10rem, 18vw, 15rem) minmax(0, 1fr); }
.secondary {
  display: none;
  align-content: start;
  border-top: 1px solid var(--line);
}
main:has([data-group="personal"]:target) [data-menu="personal"],
main:has([data-group="archivo"]:target) [data-menu="archivo"] { display: grid; }
.secondary .nav-link {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  color: var(--muted);
  font-size: .9rem;
}
.secondary .nav-link:hover { background: var(--panel); color: var(--ink); }
.secondary .nav-link[aria-current] {
  background: #38282b;
  color: var(--ink);
  border-left-color: #d54d51;
}

.screen { display: none; min-width: 0; }
.screen:target { display: block; }
.screen h2 {
  margin-bottom: clamp(1rem, 2.5vw, 1.9rem);
  font: 400 clamp(2.15rem, 4.8vw, 4rem)/1.04 var(--display);
  letter-spacing: -.045em;
}
.text-screen:target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, .57fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(1.5rem, 5vw, 5rem);
  align-items: start;
}
.text-screen h2 { grid-column: 1 / -1; }
.text-screen::after {
  content: "";
  grid-column: 2;
  grid-row: 2;
  min-height: clamp(13rem, 28vw, 29rem);
  background: #626262 var(--backdrop) no-repeat right bottom / cover;
  mask-image: linear-gradient(145deg, transparent 0%, #000 19%);
}
#trayectoria::after {
  aspect-ratio: 261 / 397;
  min-height: auto;
  width: min(100%, 18rem);
  justify-self: end;
}
.scroll-box, .scroll-content { min-width: 0; }
.prose { max-width: 70ch; color: var(--muted); }
.prose strong { color: var(--ink); }
.prose p + p { margin-top: 1em; }

.gallery-layout { display: grid; align-items: start; gap: clamp(1rem, 3vw, 3rem); }
.fans .gallery-layout, .posters .gallery-layout {
  grid-template-columns: minmax(14rem, .42fr) minmax(0, 1fr);
}
.gallery-layout .scroll-content {
  max-height: min(63vh, 38rem);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #86868a #303033;
}
.work-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.work-list li { border-bottom: 1px solid var(--line); }
.work-list a {
  display: block;
  padding: .62rem .75rem;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.work-list a:hover { background: var(--panel); }
.work-list a[data-selected] { background: #38282b; border-left-color: #d54d51; }
.work-list strong { font-weight: 600; }
.work-list span { display: block; color: var(--muted); font-size: .83rem; }
.preview { min-width: 0; }
.preview-link {
  display: grid;
  place-items: center;
  min-height: 10rem;
  background: #303033;
  border: 1px solid var(--line);
  padding: clamp(.8rem, 2.4vw, 2rem);
}
.preview-link img {
  object-fit: contain;
  width: 100%;
  max-width: 42rem;
  height: clamp(14rem, 44vw, 31rem);
}
.posters .preview-link img { max-width: 26rem; }
.preview figcaption { margin-top: .6rem; color: var(--muted); font-size: .9rem; }
.preview figcaption:empty { display: none; }
.photos .gallery-layout { grid-template-columns: minmax(11rem, .56fr) minmax(0, 1fr); }
.photos .preview-link img { max-width: 33rem; }
.thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.55rem, 1fr)); gap: .4rem; }
.thumbnails a { display: block; border: 2px solid transparent; }
.thumbnails img { width: 100%; height: auto; }
.thumbnails a:hover { border-color: var(--muted); }
.thumbnails a[data-selected] { border-color: var(--red-light); }

.contact dl { margin-bottom: 1.1rem; }
.contact dt { font-weight: 700; }
.contact dd { margin-bottom: .65rem; color: var(--muted); overflow-wrap: anywhere; }
.contact-form { display: grid; gap: .7rem; max-width: 28rem; }
.contact-form label { display: grid; gap: .2rem; color: var(--muted); font-size: .9rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: .5rem;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.contact-form textarea { resize: vertical; }
.contact-form button {
  justify-self: start;
  padding: .45rem .8rem;
  color: #fff;
  border: 0;
  background: #922226;
  cursor: pointer;
}
.contact-form button:hover { background: #75191c; }
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding: .95rem var(--gutter);
  color: var(--muted);
  font-size: .8rem;
}
.music summary { cursor: pointer; }
.music audio { display: block; width: min(270px, 68vw); margin-top: .5rem; }

@media (max-width: 880px) {
  .site-header { flex-wrap: wrap; }
  .masthead { flex-basis: 13rem; }
  .text-screen:target { grid-template-columns: minmax(0, 1fr) minmax(8rem, .4fr); column-gap: 1.1rem; }
  .text-screen::after { min-height: 12rem; }
}

@media (max-width: 640px) {
  .intro-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 1rem;
    padding-top: 2.4rem;
  }
  .intro-stage::before { height: 9rem; }
  .intro-portrait { width: min(76%, 18rem); }
  .intro-description { margin-top: .8rem; }
  .intro-nav { margin-top: 1.1rem; }
  .site-header { gap: .65rem; padding-block: .85rem .55rem; }
  .masthead { flex-basis: 11rem; }
  .primary { width: 100%; }
  .primary .nav-link { font-size: .82rem; }
  main:has(.screen[data-group]:target) { grid-template-columns: minmax(0, 1fr); }
  .secondary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); }
  .secondary .nav-link { padding: .52rem .5rem; font-size: .82rem; }
  .text-screen:target { grid-template-columns: minmax(0, 1fr); }
  .text-screen::after { grid-column: 1; grid-row: auto; margin-top: 1.4rem; min-height: 12rem; }
  #trayectoria::after { justify-self: start; width: min(55%, 12rem); }
  .fans .gallery-layout, .posters .gallery-layout, .photos .gallery-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .preview { grid-row: 1; }
  .preview-link img { height: clamp(10rem, 58vw, 22rem); }
  .gallery-layout .scroll-content { max-height: 19rem; }
}