/* El Pecado de Lola: the special edition's own page. Its label takes over from the tin's black: Lola's cream, the red of
   the skirt, black ink, a geometric LOLA and a book serif for the story printed on the back of the tin. The bar, the
   menu and the footer stay El Pastor's. Loaded after site.css on /lola only. */

@font-face { font-family: "Newsreader"; src: url("/el-pastor/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/el-pastor/fonts/newsreader-latin-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

.page-lola {
  --lola-cream: #f7efe3; --lola-red: #d90a10; --lola-red-ink: #b3080e; --lola-black: #141210;
  --font-story: "Newsreader", "Marcellus fallback", Georgia, serif;
  background: var(--lola-black);
}
.lola .paper { --paper: var(--lola-cream); --color-ink: var(--lola-black); --color-muted: #5f574b; --color-line: rgb(20 18 16 / .12); }
.lola .paper + .paper { border-top: 0; }
.lola section { padding: var(--space-section) var(--pad-x); }
.lola p { text-wrap: pretty; }
.l-pic { margin: 0; position: relative; }
.l-frame { position: relative; overflow: hidden; border-radius: 2px; }
.l-frame picture, .l-frame img { display: block; width: 100%; height: 100%; }
.l-frame img { object-fit: cover; }
/* Each picture is named, like a chapter of the story: a small red roman numeral and a word in the label's capitals. */
.l-cap { display: flex; align-items: baseline; gap: .7em; margin-top: 14px; font: 500 .78rem/1.3 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted); }
.l-cap-n { font: italic 400 1.05rem/1 var(--font-story); letter-spacing: 0; text-transform: none; color: var(--lola-red-ink); }

/* The front of the label: the name on the left, the skirt and the legs falling from the top on the right. */
.lola .l-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding-top: clamp(110px, 16svh, 160px); padding-bottom: clamp(56px, 10svh, 120px); overflow: hidden; }
.l-kicker { display: flex; align-items: center; gap: .9em; font: 500 .74rem/1 var(--font-text); letter-spacing: .28em; text-transform: uppercase; margin-bottom: clamp(28px, 6svh, 64px); }
.l-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lola-red); }
.l-title { margin: 0; font-weight: 400; }
.l-pre { display: block; font: 400 clamp(1.15rem, .8rem + 1.6vw, 2.2rem)/1 var(--font-text); letter-spacing: .26em; text-transform: uppercase; margin-bottom: .45em; }
.l-word { display: block; width: min(100%, 40rem); height: auto; fill: var(--lola-black); overflow: visible; }
.l-product { margin-top: clamp(28px, 5svh, 52px); font: 500 clamp(.8rem, .74rem + .3vw, .98rem)/1.3 var(--font-text); letter-spacing: .2em; text-transform: uppercase; }
.l-tag { margin-top: .5rem; font: italic 400 clamp(1.2rem, 1rem + .9vw, 1.7rem)/1.3 var(--font-story); }
.l-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(32px, 6svh, 56px); }
.l-btn { display: inline-block; padding: 1.05em 1.6em; border-radius: 999px; background: var(--lola-red); color: #fff; font: 500 .76rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background-color .3s ease; }
.l-more { display: inline-flex; gap: .6em; color: inherit; font: 500 .76rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: .8em 0; border-bottom: 1px solid currentColor; }
@media (hover: hover) and (pointer: fine) { .l-btn:hover { background: var(--lola-black); } .l-more:hover { color: var(--lola-red-ink); } }
.l-legs { position: absolute; top: 0; right: 0; width: min(38vw, 40rem, 62svh); } /* flush with the window's top and right edge at every width, as the skirt runs off the label */
.l-legs-film, .l-legs-still { -webkit-mask-image: linear-gradient(to right, transparent, #000 7%), linear-gradient(to top, transparent, #000 2.5%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 7%), linear-gradient(to top, transparent, #000 2.5%); mask-composite: intersect; } /* its left and bottom edges melt into the page's cream */
.l-legs-film, .l-legs-still { display: block; width: 100%; height: auto; background: var(--lola-cream); }
.l-legs-film { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.l-legs-film.is-playing { opacity: 1; }
/* Under reduced motion the film holds its first frame (its poster). */
@media (prefers-reduced-motion: reduce) { .l-legs-film { visibility: hidden; } .l-legs { background: url("/el-pastor/films/lola-legs-poster.webp") center / 100% auto no-repeat; } }

/* The story, as on the back of the tin, told in pictures and a few lines at a time. */
.l-open { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.l-pic-tin .l-frame { aspect-ratio: 4 / 5; }
.l-lead { font: 400 clamp(1.7rem, 1.1rem + 2.2vw, 3.1rem)/1.18 var(--font-story); letter-spacing: -.01em; }
.l-lead::first-letter { color: var(--lola-red); }
.l-copy { max-width: 36rem; font: 400 clamp(1.08rem, 1rem + .35vw, 1.3rem)/1.6 var(--font-story); }
.l-copy > * + * { margin-top: 1.1em; }
.l-big { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem); line-height: 1.35; }
.l-gordal { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.l-pic-olive .l-frame { aspect-ratio: 4 / 5; }

.l-turn { position: relative; text-align: center; padding-block: clamp(96px, 18svh, 200px); overflow: hidden; }
.l-turn-line { max-width: 20ch; margin-inline: auto; font: italic 400 clamp(2rem, 1.2rem + 3.4vw, 4.4rem)/1.1 var(--font-story); letter-spacing: -.015em; }

.l-ritual { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.l-ritual-pics { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 2.8vw, 44px); }
.l-ritual-pics .l-frame { aspect-ratio: 4 / 5; }
.l-pic-pour { transform: translateY(12%); }
.l-thread { position: relative; z-index: 1; grid-column: 1 / -1; display: block; height: 2px; margin-top: clamp(56px, 10svh, 120px); background: var(--lola-red); transform: scaleX(0); transform-origin: 0 50%; }
.l-four { grid-column: 1 / -1; list-style: none; margin: -2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-ink); }
.l-four li { padding: 1.4rem 1.2rem 0 0; display: grid; gap: .4rem; }
.l-four li + li { border-left: 1px solid var(--color-line); padding-left: 1.2rem; }
.l-four span { font: 500 .72rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--lola-red-ink); }
/* --lit (0 to 1) is set by the thread (scenes/lola-thread.js) as it reaches each flavour: its name warms to red. */
.l-four li { --lit: 0; }
.l-four b { color: color-mix(in srgb, var(--lola-red-ink) calc(var(--lit) * 100%), var(--color-ink)); }
.l-four b { font: 400 clamp(1.3rem, 1rem + 1vw, 1.9rem)/1.15 var(--font-story); }

.l-table { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.l-pic-cook .l-frame { aspect-ratio: 4 / 5; }

.l-taste { display: grid; gap: clamp(40px, 7svh, 80px); justify-items: center; }
.l-pic-taste { width: 100%; max-width: var(--max); }
.l-pic-taste .l-frame { aspect-ratio: 3 / 2; }
.l-copy-center { text-align: center; max-width: 40rem; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.45; }

/* Line drawings in the label's red: the gordal losing its stone (deshuesada) and the aroma rising from the bowl. They
   draw, rest and draw again (scenes/lola-olive.js, lola-aroma.js); still and complete without them. */
.l-draw { display: block; height: auto; overflow: visible; }
.l-draw .ln { fill: none; stroke: var(--lola-red-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.l-draw-olive { width: clamp(180px, 17vw, 260px); transform: rotate(-10deg); transform-origin: 30% 50%; margin-bottom: clamp(20px, 3svh, 36px); }
.l-draw-olive .pit { fill: var(--lola-red); opacity: 0; }
.l-draw-aroma { width: clamp(96px, 9vw, 132px); margin-bottom: -12px; }
.l-draw-aroma .bowl { stroke: var(--color-ink); stroke-width: 1.1; }

/* The secret, on black: the one line Lola says, in the red of the skirt. */
.l-secret { background: var(--lola-black); color: var(--lola-cream); text-align: center; padding-block: clamp(110px, 20svh, 220px); }
.l-secret-intro, .l-secret-after { max-width: 34rem; margin-inline: auto; font: 400 clamp(1.1rem, 1rem + .4vw, 1.35rem)/1.55 var(--font-story); color: rgb(247 239 227 / .78); }
.l-quote { margin: clamp(28px, 5svh, 56px) auto; }
.l-quote p.is-lit { --sheen: -40%; background: linear-gradient(100deg, #e8463f 0%, #e8463f calc(var(--sheen) - 14%), #ffd9cf var(--sheen), #e8463f calc(var(--sheen) + 14%), #e8463f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l-quote p { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.l-quote p { font: italic 400 clamp(2.4rem, 1.2rem + 5vw, 6rem)/1.02 var(--font-story); letter-spacing: -.02em; color: #ff3b30; color: color-mix(in srgb, var(--lola-red) 82%, #fff); }

/* The end of the back label, what is in the tin, and the way to order it. */
.l-end { display: grid; gap: clamp(56px, 10svh, 120px); }
.l-end-text { max-width: 46rem; }
.l-sign { margin-top: 1.4rem; font: italic 400 clamp(1.2rem, 1rem + .8vw, 1.6rem)/1.3 var(--font-story); }
.l-sign b { font: 600 .9em/1 var(--font-text); font-style: normal; letter-spacing: .14em; text-transform: uppercase; margin-right: .4em; }
.l-end-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); border-top: 1px solid var(--color-ink); padding-top: clamp(28px, 5svh, 48px); }
.l-facts { margin: 0; display: grid; gap: 1.2rem; }
.l-facts-head { font: 500 .72rem/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--lola-red-ink); }
.l-facts > div:not(.l-facts-head) { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-line); }
.l-facts dt { font: 500 .74rem/1.5 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); }
.l-facts dd { margin: 0; font: 400 1.15rem/1.4 var(--font-story); }
.l-ask-title { font: 400 var(--fs-h3)/1.1 var(--font-story); letter-spacing: -.01em; }
.l-ask p:not(.l-actions) { margin-top: 1rem; max-width: 30rem; color: var(--color-muted); }
.l-ask .l-actions { margin-top: 1.6rem; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .l-open-text > *, .l-copy > *, .l-four li, .l-turn-line, .l-quote, .l-facts > div, .l-ask > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

@media (max-width: 899px) {
  .lola .l-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 0; }
  .l-legs { position: relative; order: -1; justify-self: end; width: min(72%, 24rem); margin-right: calc(-1 * var(--space-gutter)); }
  .l-hero-text { margin-top: -4%; position: relative; }
  .lola section:not(.l-hero) { padding-block: clamp(64px, 10svh, 96px); }
  .l-open, .l-gordal, .l-ritual, .l-table, .l-end-grid { grid-template-columns: minmax(0, 1fr); }
  .l-gordal .l-pic { order: -1; }
  .l-pic-pour { transform: translateY(8%); }
  .l-four { grid-template-columns: 1fr 1fr; row-gap: 1.6rem; }
  .l-four li:nth-child(3) { border-left: 0; padding-left: 0; }
  .l-facts > div:not(.l-facts-head) { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}

/* The pictures hang as Andalusian arches, like the doors of Lola's patio, ringed by a red hairline a little way out
   (Fredd's pick, 29 Oct). */
.l-frame { border-radius: 50% 50% 0 0 / 40% 40% 0 0; box-shadow: 0 0 0 10px var(--lola-cream), 0 0 0 11px var(--lola-red-ink); }
.l-pic-taste .l-frame { border-radius: 50% 50% 0 0 / 26% 26% 0 0; }
.l-cap { margin-top: 24px; }
@media (max-width: 899px) { .l-ritual-pics .l-frame { box-shadow: 0 0 0 6px var(--lola-cream), 0 0 0 7px var(--lola-red-ink); } .l-ritual-pics { gap: 22px; } .l-ritual-pics .l-cap { margin-top: 16px; } }