/* Base before Tailwind loads: no white flash. */
html { background: #0c0a08; color: #eeebe6; font-family: "Hanken Grotesk", system-ui, sans-serif; scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #e0a24a; color: #0c0a08; }
:focus-visible { outline: 2px solid #e0a24a; outline-offset: 3px; }

/* Display type: Bodoni Moda with optical size */
.display { font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.03em; line-height: 0.92; text-wrap: balance; }
.text-name.display, .wordmark { letter-spacing: -0.04em; }

/* Single button: flat, square corners, tungsten */
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.5rem;
  background: #e0a24a; color: #0c0a08; font-weight: 500; font-size: 0.9375rem;
  transition: background-color .2s, transform .15s cubic-bezier(.2,.7,.2,1);
}
.btn:hover { background: #ecb768; }
.btn:active { transform: scale(.97); }

.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .3em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.link:hover, .link:focus-visible { text-decoration-color: currentColor; }

/* Empty slot while the photo hasn't been uploaded */
.ph { background: #1a1511; display: flex; align-items: flex-end; padding: 12px; box-sizing: border-box; }
.ph span { font: 13px/1.4 "Hanken Grotesk", system-ui, sans-serif; color: #a89c8e; word-break: break-all; }

/* Mobile menu */
.menu > summary { list-style: none; cursor: pointer; position: relative; z-index: 60; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .cerrar, .menu[open] .abrir { display: none; }
.menu[open] .cerrar { display: inline; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: hidden field, not a line */

/* Gastronomía index: the active item in full ink, the rest in muted (not faded) */
.work-name { color: #eeebe6; transition: color .2s; }
@media (min-width: 1024px) {
  .work-name { color: #a89c8e; }
  .work-item[data-active] .work-name { color: #eeebe6; }
}
.work-frame > div { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; }
.work-frame > div[data-active] { opacity: 1; }

/* Enciende la luz: dark layer + lit layer shown only inside the circle */
.luz { cursor: crosshair; touch-action: pan-y; }
.luz .dark { filter: brightness(.16) saturate(.6); }
.js .luz .lit {
  -webkit-mask-image: radial-gradient(circle at var(--x, 52%) var(--y, 70%), #000 0 13%, transparent 27%); /* taste-skill-ignore: mask for the light, not a fill */
          mask-image: radial-gradient(circle at var(--x, 52%) var(--y, 70%), #000 0 13%, transparent 27%); /* taste-skill-ignore: mask for the light, not a fill */
}

/* Photo hover */
.hover-photo img, img.hover-photo { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
a:hover .hover-photo img, a:hover img.hover-photo, .hover-photo:hover img { transform: scale(1.03); }
[data-wipe] { overflow: hidden; }

/* Entrances: only with JS, so nothing stays hidden if it fails */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js [data-reveal].in > * { opacity: 1; transform: none; }
.js [data-reveal].in > :nth-child(2) { transition-delay: 75ms; }
.js [data-reveal].in > :nth-child(3) { transition-delay: 150ms; }
.js [data-reveal].in > :nth-child(n+4) { transition-delay: 225ms; }
.js [data-reveal].in > li:nth-child(n) { transition-delay: calc(var(--i, 0) * 70ms); }
.js figure[data-reveal] [data-wipe] { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
.js figure[data-reveal].in [data-wipe] { clip-path: inset(0); }

/* Moving picture: slow drift on the hero */
.drift { animation: drift 24s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes drift { to { transform: scale(1.06); } }

/* Signature move: the name loses weight as the first screen leaves */
@supports (animation-timeline: view()) {
  .wordmark { transform-origin: right bottom; animation: pesa linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes pesa { to { transform: scale(.94); opacity: .6; } }
}

.mail { transition: color .25s; }
.mail:hover { color: #9a5f12; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] > * { transform: none; transition: opacity .3s; }
  .js figure[data-reveal] [data-wipe] { clip-path: none; }
  .drift, .wordmark { animation: none; }
  .hover-photo img, img.hover-photo { transition: none; }
}