/* -----------------------------------------------
   PATTERN: front page — .valencia-front (on <main> in templates/front-page.html)
   Every section of the front page in one sheet, so the page makes one
   request instead of five. The class sits on <main>, the parent of every
   section: its render_block filter fires after the sections inside it, so
   this sheet prints after pattern-qcards.css and pattern-note-card.css and
   its overrides of those sheets win on order as well as specificity.
   Sections, in page order: opening (.valencia-front-hello), about band,
   recent posts, recent notes, affogato band.
   Mockup: valencia-mockups/front-page-r5-a9-live-footer.html
   ----------------------------------------------- */

/* ================================================= front-hello ================================================= */
/* -----------------------------------------------
   PATTERN: front page opening — .valencia-front-hello
   Greeting line (inline avatar), the one-sentence headline (Title Reveal
   block style), three link cards, social icons, and a bento of four
   static photos shipped in assets/images/front (display-sized WebP,
   ~200 KB together, lazy-loaded; fixed tile sizes so nothing shifts).
   Type sizes and families are block attributes in the template; this
   sheet carries layout, the card chrome and the icons, which no block
   support can express. Icons: Mage Icons (Apache-2.0), drawn as masks so
   they take currentColor.
   Mockup: valencia-mockups/front-page-r5-a9-live-footer.html
   ----------------------------------------------- */
.valencia-front-hello { padding-block: calc(var(--wp--preset--spacing--xxxl) * 1.2) var(--wp--preset--spacing--xxxl); }

.valencia-front-greet { display: flex; align-items: center; gap: var(--wp--preset--spacing--sm); margin: 0; font-family: var(--wp--preset--font-family--soehne); font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1; color: var(--wp--preset--color--muted-strong); }
.valencia-front-greet img { height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }

.valencia-front-statement { max-width: 28ch; margin-block: var(--wp--preset--spacing--lg) 0; font-weight: 500; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }

/* Link cards: About is the primary (dark) card; the latest post (live
   from a Query Loop) and Say hello are quiet. Each card is one link: the inner <a> is stretched over it. */
.valencia-front-btns { display: grid; grid-template-columns: auto fit-content(300px) auto; justify-content: start; gap: var(--wp--preset--spacing--sm); max-width: 760px; }
.valencia-front-btns.valencia-front-btns { margin-top: calc(var(--wp--preset--spacing--xl) * 1.5); }
.valencia-front-btns.valencia-front-btns > * { margin: 0; }
.valencia-front-latest .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.valencia-front-btn { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--wp--preset--spacing--sm); align-items: center; align-content: center; height: 100%; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); border-radius: 14px; border: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.valencia-front-btn::before { content: ""; grid-row: 1 / 3; width: 22px; height: 22px; background: var(--wp--preset--color--ink-deep); -webkit-mask: var(--valencia-front-icon) center / contain no-repeat; mask: var(--valencia-front-icon) center / contain no-repeat; }
.valencia-front-btn.valencia-front-btn > * { grid-column: 2; margin: 0; min-width: 0; }
.valencia-front-btn-label { font-family: var(--wp--preset--font-family--soehne); font-size: var(--wp--preset--font-size--copy); font-weight: 500; line-height: 1.2; }
.valencia-front-btn .valencia-front-btn-sub.valencia-front-btn-sub { margin-top: 2px; }
.valencia-front-btn-sub { font-family: var(--wp--preset--font-family--soehne); font-size: var(--wp--preset--font-size--caption); line-height: 1.3; color: var(--wp--preset--color--muted-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.valencia-front-btn a { color: inherit; text-decoration: none; }
.valencia-front-btn a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.valencia-front-btn:hover { background: var(--wp--preset--color--paper); }
.valencia-front-btn:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--ink-deep); outline-offset: 2px; }
.valencia-front-btn a:focus-visible { outline: none; }
.valencia-front-btn.is-latest { --valencia-front-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22m4.144 16.735l.493-3.425a.97.97 0 0 1 .293-.587l9.665-9.664a1.03 1.03 0 0 1 .973-.281a5.1 5.1 0 0 1 2.346 1.372a5.1 5.1 0 0 1 1.384 2.346a1.07 1.07 0 0 1-.282.973l-9.664 9.664a1.17 1.17 0 0 1-.598.294l-3.437.492a1.044 1.044 0 0 1-1.173-1.184m8.633-11.846l4.41 4.398M3.79 21.25h16.42%22/%3E%3C/svg%3E"); }
.valencia-front-btn.is-about::before { background: var(--wp--preset--color--sky); }
.valencia-front-btn:not(.is-about) .valencia-front-btn-sub.valencia-front-btn-sub, .valencia-front-btn:not(.is-about) .valencia-front-btn-sub a { color: var(--wp--preset--color--muted-strong); }
.valencia-front-btn.is-about .valencia-front-btn-sub, .valencia-front-btn.is-about .valencia-front-btn-sub a { color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent); }
.valencia-front-btn.is-about:hover { background: var(--wp--preset--color--ink-row); }
.valencia-front-btn.is-about { --valencia-front-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706%22/%3E%3C/svg%3E"); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.valencia-front-btn.is-hello { --valencia-front-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22%3E%3Crect width=%2218.5%22 height=%2217%22 x=%222.682%22 y=%223.5%22 rx=%224%22/%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22m2.729 7.59l7.205 4.13a3.96 3.96 0 0 0 3.975 0l7.225-4.13%22/%3E%3C/g%3E%3C/svg%3E"); }

/* Social icons: core social-links (logos only), set in hairline circles. */
.wp-block-social-links.valencia-front-social { gap: var(--wp--preset--spacing--xs); margin-top: var(--wp--preset--spacing--lg); }
.valencia-front-social .wp-social-link { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wp--custom--hairline); color: var(--wp--preset--color--muted-strong); transition: color .2s, border-color .2s; }
.valencia-front-social .wp-social-link:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); transform: none; }
.valencia-front-social .wp-social-link a { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; }
.valencia-front-social .wp-social-link svg { width: 18px; height: 18px; }

/* Bento: one large tile, one tall, two small. */
.valencia-front-bento { display: grid; grid-template-columns: 2fr 2fr 1.4fr 1.6fr; grid-template-rows: repeat(2, clamp(140px, 15vw, 220px)); grid-template-areas: "big big tall a" "big big tall b"; gap: var(--wp--preset--spacing--sm); margin-top: var(--wp--preset--spacing--xxl); }
.valencia-front-bento.valencia-front-bento > .wp-block-image { margin: 0; }
.valencia-front-bento > .wp-block-image { position: relative; overflow: hidden; border-radius: 20px; background: var(--wp--preset--color--wash); }
.valencia-front-bento img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.valencia-front-bento > .wp-block-image:hover img { transform: scale(1.05); }
.valencia-front-bento figcaption { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.valencia-front-bento .is-big { grid-area: big; }
.valencia-front-bento .is-tall { grid-area: tall; }
.valencia-front-bento .is-tall img { object-position: 70% 50%; }
.valencia-front-bento .is-a { grid-area: a; }
.valencia-front-bento .is-b { grid-area: b; }
.valencia-front-bento .is-b img { object-position: 50% 80%; }

@media (max-width: 760px) {
  .valencia-front-hello { padding-top: calc(var(--wp--preset--spacing--lg) * 2.5); }
  .valencia-front-bento { grid-template-columns: 1fr 1fr; grid-template-rows: 46vw 34vw 34vw; grid-template-areas: "big big" "tall a" "tall b"; gap: var(--wp--preset--spacing--xs); margin-top: var(--wp--preset--spacing--xl); }
}
@media (max-width: 760px) {
  .valencia-front-btns { grid-template-columns: 1fr; }
  .valencia-front-btn:not(.is-about) { border-color: var(--wp--custom--hairline); }
}
@media (prefers-reduced-motion: reduce) {
  .valencia-front-bento img { transition: none; }
}

/* Phones: the page gutter (.valencia-content) is the only side padding. */
@media (max-width: 760px) {
  .valencia-front-hello.valencia-front-hello { padding-inline: 0; }
}
@media (max-width: 760px) {
  /* wideSize is 100% - 2 x spacing-md; on phones that stacks on the page gutter. */
  .valencia-content > .valencia-front-hello.valencia-front-hello { max-width: none; }
}

/* Phone rhythm: within a group = sm, between groups = xxl, between
   sections = xxxl (the band and section paddings). */
@media (max-width: 760px) {
  .valencia-front-statement.valencia-front-statement { margin-top: var(--wp--preset--spacing--sm); }
  .valencia-front-btns.valencia-front-btns { margin-top: calc(var(--wp--preset--spacing--xxl) * 1.5); }
  .wp-block-social-links.valencia-front-social.valencia-front-social { margin-top: var(--wp--preset--spacing--sm); }
  .valencia-front-bento.valencia-front-bento { margin-top: var(--wp--preset--spacing--xxl); }
}

/* The primary card gets more room than the quiet ones. */
@media (min-width: 761px) {
  .valencia-front-btn.is-about { min-width: 220px; padding-inline: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl); }
}

/* ================================================= front-about ================================================= */
/* -----------------------------------------------
   PATTERN: front page about band — .valencia-front-about
   Paper band (backgroundColor on the block). The bio is the lead on the
   left; the press line and the start-here line sit together on the right.
   Sizes are block attributes; this sheet carries the two-column layout
   and the link treatment.
   ----------------------------------------------- */
.valencia-front-about { padding-block: var(--wp--preset--spacing--xxl); }
.valencia-front-about.valencia-front-about { margin-block: 0; }
.valencia-front-about-grid { display: grid; grid-template-columns: 7fr 4fr; gap: var(--wp--preset--spacing--xxl); align-items: start; }
/* Optical alignment: the side column's first line sits on the bio's first line. */
.valencia-front-side { padding-top: .45em; }
.valencia-front-about-grid.valencia-front-about-grid > * { margin: 0; }
/* Bio and section-heading sizes live here, not as block font-size presets:
   presets print with !important, and these step down on phones. */
.valencia-front-bio { font-size: var(--wp--preset--font-size--x-large); line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
.valencia-front-head h2 { font-size: var(--wp--preset--font-size--x-large); }
.valencia-front-side.valencia-front-side p { margin: 0; }
.valencia-front-side p { line-height: 1.55; color: var(--wp--preset--color--muted-strong); }
.valencia-front-side.valencia-front-side p + p { margin-top: var(--wp--preset--spacing--md); }
.valencia-front-about a { font-weight: inherit; color: var(--wp--preset--color--ink-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--wp--preset--color--ink-deep) 35%, transparent); transition: background-color .2s; }
.valencia-front-about a:hover { background: var(--wp--custom--sky-tint); text-decoration-color: currentColor; }
@media (max-width: 960px) {
  .valencia-front-about-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--xl); align-items: start; }
}

@media (max-width: 760px) {
  .valencia-front-about.valencia-front-about { padding-inline: 5vw; }
  .valencia-front-about-grid.valencia-front-about-grid { padding-inline: 0; }
}
@media (max-width: 760px) {
  .valencia-front-about > .valencia-front-about-grid.valencia-front-about-grid { max-width: none; }
}

@media (max-width: 760px) {
  .valencia-front-about.valencia-front-about { padding-block: var(--wp--preset--spacing--xxxl); }
}

/* ================================================= front-posts ================================================= */
/* -----------------------------------------------
   PATTERN: front page recent posts — .valencia-front-posts
   Wraps Valencia's Post Cards (pattern-qcards.css, plate treatment) in the
   lead shape: newest post spans the row, the next two sit below. This
   sheet only narrows the colour cycle to one (ink-deep) and keeps two
   columns on phones; the cards themselves are untouched.
   ----------------------------------------------- */
.valencia-front-posts { padding-top: var(--wp--preset--spacing--xxxl); }
.valencia-front-head { margin-bottom: var(--wp--preset--spacing--lg); }
.valencia-front-head.valencia-front-head > * { margin: 0; }
.valencia-front-head a { color: var(--wp--preset--color--ink-deep); text-underline-offset: .18em; }
.valencia-front-posts .valencia-qcards { --qc-2: var(--wp--preset--color--ink-deep); --qc-3: var(--wp--preset--color--ink-deep); --qc-4: var(--wp--preset--color--ink-deep); display: grid; gap: var(--wp--preset--spacing--md); }
.valencia-front-posts .valencia-qcards.valencia-qcards > * { margin: 0; }
.valencia-front-posts .valencia-qcards-lead .valencia-qcard { aspect-ratio: 21 / 9; }
.valencia-front-posts .valencia-qcards-grid .valencia-qcard { aspect-ratio: 16 / 9; }
.valencia-front-posts .wp-block-post-template { margin: 0; padding: 0; }
@media (max-width: 760px) {
  .valencia-front-posts .valencia-qcards { gap: var(--wp--preset--spacing--sm); }
  .valencia-front-posts .valencia-qcards-grid .wp-block-post-template { gap: var(--wp--preset--spacing--sm); }
  .valencia-front-posts .valencia-qcards-lead .valencia-qcard { aspect-ratio: 16 / 10; }
  .valencia-front-posts .valencia-qcards-grid .valencia-qcard { aspect-ratio: 4 / 5; padding: var(--wp--preset--spacing--sm); }
  .valencia-front-posts .valencia-qcards-grid .valencia-qcard-title.valencia-qcard-title { font-size: var(--wp--preset--font-size--medium); line-height: 1.15; padding-right: 0; }
  .valencia-front-posts .valencia-qcards-grid .valencia-qcard-photo { width: 46%; top: -8px; right: -8px; border-width: 3px; }
}

@media (max-width: 760px) {
  .valencia-front-posts.valencia-front-posts { padding-inline: 0; }
  /* Never one column: core collapses columnCount grids on small screens. */
  .valencia-front-posts .valencia-qcards-grid .wp-block-post-template.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .valencia-content > .valencia-front-posts.valencia-front-posts { max-width: none; }
}

/* The section's own top padding is the gap; drop the root block gap. */
.valencia-content > .valencia-front-posts.valencia-front-posts { margin-top: 0; }
@media (max-width: 760px) {
  .valencia-front-head.valencia-front-head { margin-bottom: var(--wp--preset--spacing--sm); }
}

/* ================================================= front-notes ================================================= */
/* -----------------------------------------------
   PATTERN: front page recent notes — .valencia-front-notes
   Loose slips on a page, built from existing parts: each slip is a
   .valencia-note-card (pattern-note-card.css: surface, hairline, 8px
   radius, soft shadow, and the typewriter date that note-card.js arms),
   set at an angle with the valencia-tilt convention (--valencia-tilt).
   The ground fades from the page to paper so the section has no seam.
   The whole slip is the link: the title's <a> is stretched over it.
   ----------------------------------------------- */
.valencia-front-notes.valencia-front-notes { margin-block: 0; }
.valencia-front-notes { padding-block: var(--wp--preset--spacing--xxxl); background: linear-gradient(to bottom, var(--wp--preset--color--base) 0, var(--wp--preset--color--paper) clamp(120px, 14vw, 220px)); }
.valencia-front-notes-list .wp-block-post-template { gap: var(--wp--preset--spacing--lg); align-items: start; margin: 0; padding: 0; }
.wp-block-group.valencia-front-slip { padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg); transform: rotate(var(--valencia-tilt, -1.4deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.valencia-front-notes-list li:nth-child(2) .valencia-front-slip { --valencia-tilt: .9deg; margin-top: 18px; }
.valencia-front-notes-list li:nth-child(3) .valencia-front-slip { --valencia-tilt: -.6deg; margin-top: 6px; }
.wp-block-group.valencia-front-slip:hover { --valencia-tilt: 0deg; box-shadow: var(--wp--preset--shadow--lifted); }
.valencia-front-slip .wp-block-post-title { margin: 10px 0 0; line-height: 1.25; }
.valencia-front-slip .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; transition: color .2s; }
.valencia-front-slip .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.valencia-front-slip:hover .wp-block-post-title a { color: var(--wp--preset--color--ink-deep); }
.valencia-front-slip .wp-block-post-excerpt { margin-top: var(--wp--preset--spacing--xs); }
.valencia-front-slip .wp-block-post-excerpt__excerpt { margin: 0; line-height: 1.5; }
.valencia-front-slip .wp-block-post-excerpt__more-text { display: none; }
@media (max-width: 760px) {
  .valencia-front-notes-list .wp-block-post-template.wp-block-post-template { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--md); }
  .valencia-front-notes-list li:nth-child(n) .valencia-front-slip { --valencia-tilt: -.6deg; margin-top: 0; }
  .valencia-front-notes-list li:nth-child(2n) .valencia-front-slip { --valencia-tilt: .6deg; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-group.valencia-front-slip { transition: none; }
}

@media (max-width: 760px) {
  .valencia-front-notes.valencia-front-notes { padding-inline: 5vw; }
  .valencia-front-notes.valencia-front-notes > .alignwide { padding-inline: 0; }
}
@media (max-width: 760px) {
  .valencia-front-notes.valencia-front-notes > .alignwide { max-width: none; }
}

/* ================================================= affogato ================================================= */
/* -----------------------------------------------
   PATTERN: affogato band — .valencia-affogato
   The closing ask on Valencia's coral accent (backgroundColor on the
   block). The heading stays plain, editable text; assets/js/affogato-pour.js
   wraps its last "o" at runtime and adds the pour: a one-stroke cone, the
   Mage cup-hot icon tipping over, an espresso stream simulated with
   gravity, and a drip. The script loads only where this class is used.
   Reduced motion: no pour.
   ----------------------------------------------- */
.valencia-affogato { padding-block: var(--wp--preset--spacing--xxxl); }
/* Full-width bands sit flush: no root block gap between them. */
.valencia-affogato.valencia-affogato { margin-block: 0; }
.valencia-affogato-grid { display: grid; grid-template-columns: 5fr 6fr; gap: var(--wp--preset--spacing--xl); align-items: center; }
.valencia-affogato-grid.valencia-affogato-grid > * { margin: 0; }
.valencia-affogato-title { font-weight: 500; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; cursor: default; }
.valencia-affogato p { max-width: 30rem; margin: 0; line-height: 1.5; }
.valencia-affogato .wp-block-buttons.wp-block-buttons { gap: var(--wp--preset--spacing--xs); margin-top: var(--wp--preset--spacing--lg); }
.valencia-affogato .wp-block-button__link { border-radius: 999px; }
.valencia-affogato-hello .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--xs); }
.valencia-affogato-hello .wp-block-button__link::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22%3E%3Cpath d=%22M3.5 9.256h12v7.996a3.997 3.997 0 0 1-4 3.998h-4a4 4 0 0 1-4-3.998z%22/%3E%3Cpath d=%22M15.5 10.256h3a2 2 0 0 1 2 1.999v3.998a2 2 0 0 1-2 1.999h-3.13M5.89 6.748a1.41 1.41 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998m3.25 3.998a1.42 1.42 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998m3.49 3.998a1.41 1.41 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22%3E%3Cpath d=%22M3.5 9.256h12v7.996a3.997 3.997 0 0 1-4 3.998h-4a4 4 0 0 1-4-3.998z%22/%3E%3Cpath d=%22M15.5 10.256h3a2 2 0 0 1 2 1.999v3.998a2 2 0 0 1-2 1.999h-3.13M5.89 6.748a1.41 1.41 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998m3.25 3.998a1.42 1.42 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998m3.49 3.998a1.41 1.41 0 0 0 0-2a1.41 1.41 0 0 1 0-1.998%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.valencia-affogato-hello .wp-block-button__link:hover { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }
.valencia-affogato .is-style-valencia-ghost .wp-block-button__link:hover,
.valencia-affogato .is-style-valencia-ghost .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* The pour (elements added by affogato-pour.js). Sizes in em follow the heading. */
.valencia-affogato-o { position: relative; display: inline-block; }
.valencia-affogato-o svg { position: absolute; pointer-events: none; overflow: visible; }
.valencia-affogato-cone { left: 50%; top: 78%; width: .5em; height: .58em; transform: translate(-50%, .25em); opacity: 0; transition: transform .18s ease-in, opacity .15s ease-in; }
.valencia-affogato-cup { left: 48%; bottom: 92%; width: .6em; height: .6em; transform-origin: 20% 80%; transform: translate(.15em, -.1em); opacity: 0; transition: transform .18s ease-in, opacity .15s ease-in; }
.valencia-affogato-cup g { transform-origin: 20% 80%; stroke-width: 2.5; }
.valencia-affogato-cup .valencia-affogato-steam { stroke-width: 1.5; }
.valencia-affogato-flow { left: 0; top: 0; width: 100%; height: 100%; }
.valencia-affogato-flow path, .valencia-affogato-drip path { fill: currentColor; }
.valencia-affogato-drip { left: 50%; top: 27%; width: .66em; height: .42em; transform: translate(-50%, -.05em) scale(.2, 0); transform-origin: 50% 0; opacity: 0; transition: transform .15s ease-in, opacity .12s ease-in; }
.valencia-affogato-title.is-on .valencia-affogato-cone { transform: translate(-50%, 0); opacity: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.valencia-affogato-title.is-on .valencia-affogato-cup { opacity: 1; transform: rotate(-12deg); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .2s; }
.valencia-affogato-title.is-tilted .valencia-affogato-cup { transform: rotate(-52deg); }
.valencia-affogato-title.is-tilted .valencia-affogato-cup g { animation: valencia-affogato-glug .42s ease-in-out infinite alternate; }
@keyframes valencia-affogato-glug { from { transform: rotate(0); } to { transform: rotate(-4deg); } }
.valencia-affogato-title.is-landed .valencia-affogato-drip { opacity: 1; transform: translate(-50%, -.05em) scale(1, 1); transition: transform .9s cubic-bezier(.12, .9, .25, 1), opacity .1s; }

@media (max-width: 760px) {
  .valencia-affogato-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--md); }
}
@media (prefers-reduced-motion: reduce) {
  .valencia-affogato-o svg { display: none; }
}

@media (max-width: 760px) {
  .valencia-affogato.valencia-affogato { padding-inline: 5vw; }
  .valencia-affogato-grid.valencia-affogato-grid { padding-inline: 0; }
}
@media (max-width: 760px) {
  .valencia-affogato > .valencia-affogato-grid.valencia-affogato-grid { max-width: none; }
}

@media (max-width: 760px) {
  .valencia-affogato .wp-block-buttons.wp-block-buttons { margin-top: var(--wp--preset--spacing--md); }
}

/* ================================================= phone hierarchy ================================================= */
/* Type steps: H1 (title) > section headings (display) > bio and card
   titles (large) > body. Sections are set apart by more space than the
   groups inside them (xxxl x 1.3 against xxl). */
@media (max-width: 760px) {
  .valencia-front-head.valencia-front-head h2 { font-size: var(--wp--preset--font-size--display); line-height: 1.05; letter-spacing: -.02em; }
  .valencia-front-bio.valencia-front-bio { font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
  .valencia-front-hello.valencia-front-hello { padding-bottom: calc(var(--wp--preset--spacing--xxxl) * 1.3); }
  .valencia-front-about.valencia-front-about,
  .valencia-front-notes.valencia-front-notes,
  .valencia-affogato.valencia-affogato { padding-block: calc(var(--wp--preset--spacing--xxxl) * 1.3); }
  .valencia-front-posts.valencia-front-posts { padding-top: calc(var(--wp--preset--spacing--xxxl) * 1.3); }
}