/* =========================================================================
   Miramar Brewing: story, where, contact, footer (the gallery is css/gallery.css)
   Not yet migrated to the type scale (next pass); spacing comes from the tokens.
   ========================================================================= */

/* =========================================================================
   STORY: the moments (Miguel, 2026-10-14: one system, no random sizes, a quick human read; three
   since the client's history, 2026-10-26). Each is the same module: a year, a short title and its
   lines, and a picture (a photo or a flat drawing). This is the module; the layout, the chapters, is css/story.css.
   ========================================================================= */
.story { position: relative; padding-top: var(--section-pad); }
.story .section-head { row-gap: var(--s-1); }
.story .section-lead { grid-column: 1 / -1; justify-self: start; padding-top: 0; }   /* tight under the title, flush left with it: part of the head, not body copy (Miguel, 2026-10-14) */
.moments {
  list-style: none; margin: 0; padding: 0 var(--margin);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-7);
}
.moment { grid-column: span 4; display: flex; flex-direction: column; align-items: flex-start; }
.moment__year {                                       /* a year is 3.85em wide: fits every column at --t-3 */
  display: flex; margin: 0 0 var(--s-3) -.03em; color: var(--yc);
  font: 900 italic var(--t-3)/1 var(--f-display); font-stretch: 150%; letter-spacing: -.035em;
}
.moment__art {
  order: 1; position: relative; align-self: stretch; aspect-ratio: 4 / 3; margin: 0 0 var(--s-3);
  border-radius: var(--radius); overflow: hidden; background: var(--page-2);
}
.moment__art picture { display: contents; }   /* AVIF with a WebP fallback (index.html) */
.moment__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--py, 50%); }
.moment__art--drawing { aspect-ratio: auto; min-width: 0; overflow: visible; border-radius: 0; background: none; }   /* the drawings stand on the page, no box (Miguel) */
.moment__text { order: 2; }
.moment__title { font: 800 var(--t-1)/1.1 var(--f-text); letter-spacing: -.01em; margin: 0 0 var(--s-1); }
.moment__body { margin: 0; font-size: var(--t-0); line-height: var(--lh-body); font-weight: 500; max-width: 34ch; }

.odo { display: inline-flex; }
.odo__d { display: inline-block; height: 1em; overflow: hidden; padding: 0 .06em; margin: -.1em -.06em; }
.odo__col { display: flex; flex-direction: column; transition: transform 1.8s var(--ease-out); transition-delay: calc(var(--k) * 130ms); }
.odo__col span { display: block; height: 1em; line-height: 1em; }
.is-inview .odo__col { transform: translateY(calc(var(--d) * -1em)); }

/* 2026: a shelf of cans in the brand colors, flat silhouettes in the same outline as the 3D cans
   (#can in the sprite; 2026-10-13, they were rounded boxes that didn't read as cans). Two rows of
   six on cream boards; they rise onto the boards once, no hover. (The 1996 moment's Old San Juan
   street, the other drawing, left with that moment on 2026-10-26: in git before then, and its
   rise-in is Motion Library M14.) */
.shelf { display: grid; row-gap: var(--s-2); width: 100%; --board: var(--s-1); }
.shelf__row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-1); padding: 0 var(--s-1) var(--board); }
.shelf__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--board); border-radius: 99px; background: var(--inv); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--ease-out); }
.shelf__row:nth-child(2)::after { transition-delay: .15s; }
.shelf.is-inview .shelf__row::after { transform: scaleX(1); }
.shelf svg {
  display: block; width: 100%; aspect-ratio: 100 / 236; color: var(--c);
  scale: 1 0; transform-origin: 50% 100%;
  transition: scale 1s var(--ease-spring); transition-delay: calc(.2s + var(--k) * 50ms);
}
.shelf.is-inview svg { scale: 1; }

/* =========================================================================
   WHERE: find a spot in seconds (Miguel, 2026-10-14). The usual section head, then the finder: a
   search for names and towns, then a stack of file folders (Miguel's reference), one per area and
   A–Z, each its color with black type. The open folder's list scrolls in a short window.
   ========================================================================= */
.where { position: relative; padding-top: var(--section-pad); }
/* The title: the shared section title (font, size, steps), laid out as Miguel's mock (2026-10-14):
   two lines, "Más de [120] sitios / por toda la isla", the number in a yellow bubble 1.73 caps
   tall, its edges sloping 5.6°, behind the words, which overlap its ends. A subtle shear rides the
   scroll, ±2° as the head crosses the screen (Locomotive's --progress); at rest it's the plain title. */
.where__line {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: inherit;
  transform: skewX(calc((var(--progress, .5) - .5) * -4deg)); transform-origin: 0 100%;
}
.where__title .mask { position: relative; z-index: 1; padding-top: .24em; margin-top: -.24em; }   /* over the bubble; room for the accent on MÁS */
.where__line + .where__line .mask > span { transition-delay: .2s; }
.where__num {
  position: relative; z-index: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.19em; margin: -.165em -.38em -.165em -.32em; padding: 0 .45em;   /* the words overlap its ends; the lines don't open up */
  border-radius: var(--r-pill); background: var(--parcha); color: var(--ink);
  transform: translateY(-.06em) skewY(5.6deg);
  scale: 0; rotate: -10deg;
  transition: scale 1.1s var(--ease-spring) .15s, rotate 1.1s var(--ease-spring) .15s;
}
.where__title.is-inview .where__num { scale: 1; rotate: 0deg; }
/* "Más de 120 sitios" needs 1221px at --t-4: from 1280 to 1300 the bubble hugs its digits to keep it on one line */
@media (min-width: 1280px) and (max-width: 1300px) { html[lang='es'] .where__num { padding: 0 .3em; margin-inline: -.36em -.42em; } }
@media (min-width: 640px) and (max-width: 1023px) { html[lang='es'] .where__num { padding: 0 .3em; margin-inline: -.36em -.42em; } }   /* tablets: two lines, not three */
.where__line .mask > span { text-wrap: balance; }   /* phones: "por toda / la isla", not "isla" alone */

.finder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin: 0 var(--margin); }
/* The line under the title, with the search beside it (Miguel's mock) */
.finder__top { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-3); align-items: center; }
.where__sub { grid-column: 1 / 8; max-width: 34ch; margin: 0; font-size: var(--t-1); line-height: 1.33; font-weight: 500; text-wrap: balance; }   /* the shared section lead's type */
.where__sub[data-scroll] { opacity: 0; translate: 0 var(--s-3); transition: opacity 1.1s var(--ease-out) .15s, translate 1.3s var(--ease-out) .15s; }
.where__sub.is-inview { opacity: 1; translate: 0 0; }
.finder__top .search { grid-column: 9 / -1; }
@media (min-width: 1024px) and (max-width: 1279px) { .finder__top .search { grid-column: 8 / -1; } }   /* room for the whole placeholder */
.search {
  min-width: 0; display: flex; align-items: center; gap: var(--s-2);
  height: calc(var(--s-6) + var(--s-1)); padding: 0 var(--s-3); border-radius: var(--r-pill);
  background: var(--page-2); box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .35s;
}
.search:focus-within { box-shadow: inset 0 0 0 2px var(--parcha); }
.search svg { width: var(--s-3); height: var(--s-3); flex: none; color: var(--on-page-dim); }
.search input { flex: 1; width: 0; min-width: 0; height: 100%; outline: none; font-weight: 700; font-size: var(--t-1); }
.search input::placeholder { color: var(--on-page-dim); opacity: 1; font-weight: 500; }
.search input::-webkit-search-cancel-button { filter: invert(1); }

/* The folders: the tab on the left, then the top steps down an S-curve (--drop) to the rest of the
   folder, so the folder behind shows through the notch and at the rest's round corner. Each runs
   on behind the next by --lap (the notch, two corners and the hover lift), so a folder's own round
   bottom corners never show (Miguel, 2026-10-14): they read as one stack of equal folders. Later
   folders sit in front; the open one shows its list, the others just their tab. */
.folders { --tab: var(--s-5); --drop: var(--s-2); --lap: calc(var(--drop) + 2 * var(--r-2) + var(--s-1)); display: flex; flex-direction: column; }
.ffold { position: relative; isolation: isolate; color: var(--ink); transition: translate .6s var(--ease-spring); }
.ffold:not(.is-open):not(:has(.ffold__tab:disabled)):hover { translate: 0 calc(-1 * var(--s-1)); }   /* a closed folder lifts to be pulled (the whole folder holds the hover, so it doesn't jitter at the strip's foot) */
.ffold + .ffold { margin-top: calc(-1 * var(--lap)); }
.ffold__head { position: relative; z-index: 2; display: flex; height: var(--tab); margin: 0; cursor: pointer; }   /* the × stays over the list's pinned heads */
.ffold:has(.ffold__tab:disabled) .ffold__head { cursor: default; }
.ffold__tab {
  flex: none; display: flex; align-items: center; gap: var(--s-2); width: clamp(208px, 34%, 432px);
  padding: 0 var(--s-3); border-radius: var(--r-2) 0 0 0; background: var(--c); text-align: left;
  font: 900 italic var(--t-1)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase;
}
.ffold__tab small {
  display: grid; place-items: center; min-width: var(--s-4); height: var(--s-3); padding: 0 var(--s-1);
  border-radius: var(--r-pill); background: var(--ink); color: var(--c); font: 700 var(--t--1)/1 var(--f-mono);
}
.ffold__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
.ffold__tab:disabled { cursor: default; }
.ffold__tab:disabled span, .ffold:has(.ffold__tab:disabled) .ffold__x { opacity: .45; }
/* The beers' round +, at the folder's right end; open, it turns 45° into the × that closes it */
.ffold__x {
  position: absolute; right: var(--s-2); top: calc(var(--drop) + var(--s-1));
  width: var(--s-4); height: var(--s-4); border-radius: 50%; background: var(--ink); color: var(--cream);
}
.ffold__x i { position: absolute; inset: 0; transition: rotate var(--t-card) var(--ease-cream); }
.ffold__x i::before, .ffold__x i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: currentColor; translate: -50% -50%;
}
.ffold__x i::after { rotate: 90deg; }
.ffold.is-open .ffold__x i { rotate: 45deg; }   /* + to ×, an eighth of a turn (Miguel) */
.ffold__slope { flex: none; width: var(--s-5); height: 100%; fill: var(--c); overflow: visible; }   /* the S-curve runs a little into the tab, the rest and its own body (the path past its box): a phone's 3x screen showed a hairline at its edges (Miguel, 2026-10-15) */
.ffold__rest { flex: 1; margin-top: var(--drop); border-radius: 0 var(--r-2) 0 0; background: var(--c); }
.ffold__body {
  display: grid; grid-template-rows: 0fr; padding-bottom: var(--lap);
  border-radius: 0 0 var(--r-2) var(--r-2); background: var(--c);
  transition: grid-template-rows .8s var(--ease-out);
}
.ffold:last-child .ffold__body { padding-bottom: var(--s-2); }
/* Phones: while you type, the closed folders fold away, so the results sit right under the search
   instead of under the keyboard (with the stack, the first result was 424px below it). From site
   version B of the grilling, kept 2026-10-16 */
@media (max-width: 639px) {
  .finder.is-searching .ffold:not(.is-open) { display: none; }
  .finder.is-searching .ffold.is-open { margin-top: 0; }
}
.ffold.is-open .ffold__body { grid-template-rows: 1fr; }
.ffold__inner { min-height: 0; overflow: hidden; }
/* The list's window: short, its own scroll; at either end the wheel goes back to the page (finder.js)
   and a touch scroll carries on into the page (no overscroll containment) */
.ffold__scroll {
  max-height: calc(var(--s-6) * 4.5); overflow-y: auto; padding: var(--s-1) var(--s-3) var(--s-2); outline: none;
  scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
}
.finder .ffold__scroll, .lenis .finder .ffold__scroll[data-lenis-prevent] { overscroll-behavior: auto; }
.ffold__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
/* A group's head, pinned while you scroll its group: the letter (A–Z) or the town and its count (an area) */
.fhead {
  grid-column: 1 / -1; position: sticky; top: calc(-1 * var(--s-1)); z-index: 1;
  display: flex; align-items: baseline; gap: var(--s-1); padding: var(--s-2) 0 var(--s-1); background: var(--c);
  font: 900 italic var(--t-1)/1 var(--f-display); font-stretch: 125%; text-transform: uppercase;
}
.fhead small { font: 700 var(--t--1)/1 var(--f-mono); }
.fhead:first-child { padding-top: var(--s-1); }
.spot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-2);
  min-height: var(--s-5); padding: var(--s-1); border-top: 2px solid var(--ink);   /* 48px: a tap target */
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.spot__name { font: 800 var(--t-0)/1.25 var(--f-text); overflow-wrap: anywhere; }
.spot__town { font-size: var(--t--1); line-height: 1.5; opacity: .85; }   /* 5.3:1 or more on every folder */
.spot__town:empty { display: none; }
.spot svg { grid-column: 2; grid-row: 1 / span 2; width: var(--s-2); height: var(--s-2); rotate: -45deg; transition: rotate .4s var(--ease-out); }
.spot:hover, .spot:focus-visible { background: var(--ink); color: var(--c); }
.spot:hover svg, .spot:focus-visible svg { rotate: 0deg; }
.ffold__empty { margin: 0; padding: var(--s-2) 0 var(--s-1); font: 900 italic var(--t-2)/1 var(--f-display); font-stretch: 120%; text-transform: uppercase; }
.where__more { margin: var(--s-5) var(--margin) 0; max-width: 44ch; font-weight: 700; font-size: var(--t-1); line-height: 1.33; text-wrap: pretty; }
.where:has(.ffold.is-open .ffold__empty:not([hidden])) .where__more { visibility: hidden; }   /* no match: the folder already says it */
.where__more[data-scroll] { opacity: 0; translate: 0 var(--s-3); transition: opacity 1s var(--ease-out) .15s, translate 1.2s var(--ease-out) .15s; }
.where__more.is-inview { opacity: 1; translate: 0 0; }
@media (max-width: 1023px) { .ffold__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .where__sub, .finder__top .search { grid-column: 1 / -1; } }
@media (max-width: 639px) {
  .finder { gap: var(--s-5); }
  .search { height: var(--s-5); padding: 0 var(--s-2); } .search input { font-size: var(--t-0); }   /* 16px: phones don't zoom in */
  .ffold__tab { padding: 0 var(--s-2); font-size: var(--t-0); }
  .fhead { font-size: var(--t-0); }
  .ffold__scroll { max-height: calc(var(--s-5) * 5); padding: var(--s-1) var(--s-2) var(--s-2); }
  .ffold__list { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   CONTACT + FOOTER
   ========================================================================= */
.contact { position: relative; padding: var(--section-pad) var(--frame) calc(var(--section-pad) - var(--frame)); overflow: clip; }   /* to the footer's word, the sections' 128px */
.contact__head { --ct: clamp(40px, 10.4vw, 220px); position: relative; }   /* "a saludar." fits one line at every width */   /* starts at the section's padding: its "Contacto" eyebrow went (Miguel, 2026-10-15) */
.contact__title {
  position: relative; z-index: 2;
  font: 900 italic var(--ct)/.82 var(--f-display);
  font-stretch: 132%; letter-spacing: -.03em; text-transform: uppercase;
  white-space: pre-line;
}
.contact__title .ch { display: inline-block; translate: 0 0; }
.contact__title.is-waving .ch { animation: hop .9s var(--ease-soft); animation-delay: calc(var(--ci) * 28ms); }
@keyframes hop { 0%, 100% { translate: 0 0; } 35% { translate: 0 -.14em; } 60% { translate: 0 .02em; } }
.contact__shapes {
  position: absolute; right: 0; top: 0; z-index: 1;
  height: calc(var(--ct) * .688);   /* the title's cap height (Anybody 900 italic, measured): top to the first line's cap top, bottom on its baseline (Miguel, 2026-11-03: at .8 they hung ~4px over the second line) */
  display: flex; align-items: center; gap: clamp(8px, 1vw, 16px);
  pointer-events: none;
}
.cs { display: grid; place-items: center; height: 100%; flex: none; pointer-events: auto; transition: border-radius .9s var(--ease-out), rotate .9s var(--ease-spring); }
.cs--sun { aspect-ratio: 1; border-radius: 50%; background: var(--mar); }
.cs--sun svg { width: 72.5%; color: var(--ink); translate: 0 -12%; transition: rotate 1s var(--ease-spring); }   /* the loader's mark (Miguel, 2026-10-15): .725 of the circle wide, its middle 6% of the circle above the circle's */
.cs--sun:hover svg { rotate: -14deg; }
.cs--pill { aspect-ratio: 1.9; border-radius: 99px; background: var(--rosa); }
.cs--pill:hover { border-radius: 18%; }
.cs--prflag { aspect-ratio: 1; background: var(--parcha); clip-path: url(#gs-prflag); }   /* Miguel, 2026-10-15: the square Puerto Rico flag, in yellow, where a yellow quarter was; after the logo */
.cs--prflag:hover { rotate: -8deg; }

/* One column, left-aligned, no boxes (Miguel, 2026-11-03: "I'd just rather have them all in a single
   column left aligned with no boxes... no box at all... no boxes mean spacing can be a bit tighter
   without it feeling crammed"). Before: five grey cards across, where the email broke at the @ and
   the address ran to four lines; then, for an hour on the preview, slim cards two to a row. */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: var(--s-3); margin-top: var(--s-5); }   /* a title alone sits --s-5 from its content */
.ci {
  display: flex; flex-direction: column; gap: var(--s-1);
  opacity: 0; translate: 0 30px;
  transition: opacity 1s var(--ease-out), translate 1.2s var(--ease-out);
  transition-delay: calc(var(--k) * 70ms);
}
.ci.is-inview { opacity: 1; translate: 0 0; }
.ci dt { font: 700 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cielo); }
.ci dd { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; gap: var(--s-1) var(--s-2); font-weight: 800; font-size: clamp(18px, 1.4vw, 22px); }   /* the links' 44px: the hours (plain text) sit on the same line as the rest */
.ci__link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline 2px transparent; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.ci__link:focus-visible { text-decoration-color: currentColor; }   /* every detail is a link (the client's, 2026-10-26): the phone calls, the email writes, the address opens Google Maps, Instagram and Facebook open in a new tab */
@media (hover: hover) { .ci__link:hover { text-decoration-color: currentColor; } }   /* no underline stuck on after a tap */

.footer { padding: var(--frame); }
.footer__word { width: 100%; height: auto; color: var(--mar); }
.footer__word use {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: translateY(115%);
  transition: transform 1.2s var(--ease-spring), color .4s;
  transition-delay: calc(var(--k) * 70ms), 0s;
}
.footer.is-inview .footer__word use { transform: translateY(0); }
.footer__word use:hover { transform: translateY(-6%) rotate(-4deg); transition-delay: 0s; }
.footer__word use:nth-of-type(1):hover { color: var(--rosa); }
.footer__word use:nth-of-type(2):hover { color: var(--parcha); }
.footer__word use:nth-of-type(3):hover { color: var(--cielo); }
.footer__word use:nth-of-type(4):hover { color: var(--monte); }
.footer__word use:nth-of-type(5):hover { color: var(--gallo); }
.footer__word use:nth-of-type(6):hover { color: var(--on-page); }
.footer__word use:nth-of-type(7):hover { color: var(--rosa); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-4); color: var(--on-page-dim); }
.footer__row > span { text-wrap: balance; }   /* "Flow Systems" stays together */
.totop {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--s-5); padding: 0 var(--s-1) 0 var(--s-3); border-radius: 99px;
  background: var(--inv); color: var(--on-inv);
  font-weight: 700;
  transition: background-color .4s, color .4s;
}
.totop i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--on-inv); color: var(--inv); rotate: -90deg; transition: rotate .7s var(--ease-spring); }
.totop i svg { width: 16px; height: 16px; }
.totop:hover { background: var(--parcha); color: var(--ink); }
.totop:hover i { background: var(--ink); color: var(--cream); }
.totop:hover i { rotate: -90deg; translate: 0 0; animation: nudgeUp .8s var(--ease-soft); }
@keyframes nudgeUp { 50% { transform: translateX(4px); } }

@media (max-width: 639px) {
  .contact__head { --ct: 10.4vw; }


  .contact__shapes { position: relative; height: 84px; margin-top: var(--s-3); }   /* under the title, the heads' rhythm (Miguel, 2026-11-03: it sat flush on the title): --s-3 from the title, as a head's row gap; --s-5 to the list (.contact__grid), a head to its content */
  .totop { margin-left: 0; }
}