html[data-theme="black"] {
  color-scheme:dark;
  --bg:#171719;--theme-ink:#f3eee9;--theme-copy:#d0c9c5;--theme-muted:#aaa09e;--theme-surface:#242326;--theme-line:#494247;--theme-link:#f0a2a8;
}
html[data-theme="burgundy"] {
  color-scheme:dark;
  --bg:#3b1722;--theme-ink:#fff1e8;--theme-copy:#e6cfcf;--theme-muted:#c7a9b0;--theme-surface:#4b2430;--theme-line:#78505e;--theme-link:#f7c7a4;
}
html[data-theme="ochre"] {
  color-scheme:light;
  --bg:#d7b56d;--theme-ink:#35291e;--theme-copy:#493a2c;--theme-muted:#6b543b;--theme-surface:#e7cc92;--theme-line:#ab8950;--theme-link:#762b36;
}
html[data-theme]:not([data-theme="original"]) {
  --portfolio-copy:var(--theme-copy);--portfolio-heading:var(--theme-ink);--portfolio-name:var(--theme-ink);
  --text:var(--theme-copy);--muted:var(--theme-muted);--line:var(--theme-line);--surface:var(--theme-surface);--surface-strong:var(--theme-surface);--faya-accent:var(--theme-link);
}
html[data-theme]:not([data-theme="original"]) body :is(p,li,dd,blockquote,figcaption) { color:var(--theme-copy) !important; }
html[data-theme]:not([data-theme="original"]) body :is(h1,h2,h3,h4) { color:var(--theme-ink) !important; }
html[data-theme]:not([data-theme="original"]) body #about #about-title,
html[data-theme]:not([data-theme="original"]) body #aquilo-details .aquilo-detail-copy h2,
html[data-theme]:not([data-theme="original"]) body :is(.faya-case-intro,.tale-detail-copy) h2 { color:var(--theme-ink) !important; }
html[data-theme]:not([data-theme="original"]) body :is(.faya-eyebrow,dt,.decision-elements,.project-category,.highlight-category,.highlight-year,figcaption) { color:var(--theme-muted) !important; }
html[data-theme]:not([data-theme="original"]) body :is(a,.faya-live-link,.faya-detail-next,.contact-socials a) { color:var(--theme-link) !important; }
html[data-theme]:not([data-theme="original"]) body :is(.resume-tabs,.artistic-cv-tabs,[role="tab"][aria-selected="true"],.faya-core-index-item[aria-selected="true"]) { background:var(--theme-surface);color:var(--theme-ink) !important; }
html[data-theme]:not([data-theme="original"]) body #about .character-frame { background:var(--theme-surface);border-color:var(--theme-line); }
html:is([data-theme="black"],[data-theme="burgundy"]) .hero-name-image :is(img,canvas) { filter:brightness(0) invert(.9); }
.theme-picker { position:fixed;top:18px;right:20px;z-index:80; }
body .theme-toggle { width:44px;height:44px;border-radius:50%;border:1px solid var(--theme-line,#e4ddd7);background:var(--theme-surface,#fdfcf9);color:var(--theme-ink,#2f2f31) !important;font:inherit;font-size:24px;cursor:pointer; }
.theme-options { position:absolute;top:54px;right:0;width:178px;padding:8px;background:var(--theme-surface,#fdfcf9);border:1px solid var(--theme-line,#e4ddd7);border-radius:12px;box-shadow:0 12px 32px #0002; }
.theme-options[hidden] { display:none; }
body .theme-choice { display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px;border:1px solid transparent;border-radius:7px;background:none;color:var(--theme-ink,#2f2f31) !important;font:inherit;font-size:.8rem;text-align:left;cursor:pointer; }
.theme-choice::before { content:'';width:20px;height:20px;flex:none;border-radius:50%;background:var(--swatch);border:1px solid #8888; }
body .theme-choice[aria-pressed="true"] { border-color:var(--theme-muted,#a79b9e); }
.theme-picker button:focus-visible { outline:2px solid var(--theme-link,#a33d42);outline-offset:3px; }
body #about .character-frame { flex:none;width:80%;max-width:none;height:68%;min-height:0;margin:0; }
body #about .character-stage { justify-content:center;align-items:center;padding:0;align-self:stretch;min-height:0; }
body #about .about-copy { padding-top:0; }
/* Keep profile content out of the introduction, including return transitions. */
body:not(.post-tale-flow) #about,
body #about[hidden] { display:none !important; }
body .hero-surface { min-height:100svh;box-sizing:border-box; }
body #about { overflow:clip;isolation:isolate; }
body .faya-more-work { display:flex;flex-direction:column;align-items:center;min-width:0; }
body .faya-more-work .faya-more-work-links { width:100%;flex:none; }
body .faya-more-work > .case-profile-link { position:static;inset:auto;transform:none;display:inline-flex;align-items:center;justify-content:center;align-self:center;width:100%;max-width:360px;margin:24px 0 0;flex:none;text-decoration:underline;text-underline-offset:5px; }
@media(min-width:761px) {
  body :is(.faya-current-stage-layout,.tale-current-layout,#aquilo-details .aquilo-explore-layout) {
    height:auto;min-height:0;align-self:center;align-items:stretch;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  }
  body :is(.faya-current-stage-copy,.tale-current-copy,.aquilo-reflection) { align-self:stretch;margin:0; }
  body :is(.faya-current-stage-layout,.tale-current-layout,#aquilo-details .aquilo-explore-layout) > .faya-more-work {
    display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-self:stretch;align-items:stretch;justify-items:center;margin-block:0;min-height:420px;
  }
  body .faya-more-work > .faya-eyebrow { align-self:start;margin-top:0; }
  body .faya-more-work .faya-more-work-links { min-height:320px;margin-block:18px;gap:12px;grid-template-rows:repeat(2,minmax(0,1fr)); }
  body .faya-more-work .faya-work-link { min-height:0;grid-template-rows:minmax(80px,1fr) auto;gap:2px; }
  body .faya-more-work .faya-work-link img { max-height:160px;align-self:center;object-position:center; }
  body .faya-more-work > .case-profile-link { align-self:end;margin:0;line-height:1.4; }
}
@media(min-width:761px) { body #about { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:760px) { .theme-picker { top:12px;right:12px; }body #about .character-stage { min-height:0; }body #about .character-frame { flex:none;height:300px;min-height:0;width:80%;max-width:none; } }
/* Compact tap navigation is exclusive to the mobile hero. */
body .hero-surface .site-nav { display:none; }
@media(max-width:760px) {
  body .hero-surface .site-nav {
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;
    top:auto;right:20px;left:20px;bottom:22px;z-index:10;
  }
  body .hero-surface .site-nav a {
    display:inline-flex;align-items:center;justify-content:center;min-height:44px;
    padding:4px 6px;font-size:.7rem;letter-spacing:.05em;color:var(--portfolio-copy,#746b76);
    -webkit-tap-highlight-color:transparent;
  }
  body .hero-surface .site-nav a:focus-visible { outline:2px solid currentColor;outline-offset:2px; }
  body .hero-surface .scroll-indicator { display:none; }
}
@media(hover:none) {
  .hero-surface .project[data-active="true"] .project-content { opacity:0;visibility:hidden;pointer-events:none; }
  .hero-name-image .signature-warp { pointer-events:none; }
}
@media(max-width:760px) {
  html.mobile-hero-locked,html.mobile-hero-locked body { overflow:hidden;overscroll-behavior:none;height:100dvh; }
  html.mobile-hero-locked .hero-surface { touch-action:pinch-zoom; }
  html.mobile-hero-locked .hero-surface .site-nav { touch-action:manipulation; }
}
/* Chapter navigation is horizontal independently of the handoff animation. */
body #faya-details .faya-case-track {
  display:flex;width:calc(var(--faya-panel-count,5)*100%);
  transform:translate3d(calc(var(--faya-case-shift,0)*-1%),0,0) !important;
}
body #faya-details .faya-case-panel { flex:0 0 calc(100% / var(--faya-panel-count,5)); }
@media(max-width:700px) {
  body #faya-details { height:100dvh;min-height:0;overflow:hidden; }
  body #faya-details .faya-case-track { height:100%;min-height:0; }
  body #faya-details .faya-case-panel {
    display:block;width:calc(100% / var(--faya-panel-count,5));height:100%;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;padding:32px var(--page-edge) 44px;
  }
  body .faya-scroll-laptop { display:none !important; }
  body #faya-details .faya-demo { visibility:visible; }
  body #faya-details .faya-case-intro { opacity:1;transform:none; }
}
body.faya-hero-jumping .faya-scroll-laptop { display:block !important;visibility:visible !important;opacity:1 !important; }
body.faya-hero-jumping #faya-details .faya-demo { visibility:hidden !important; }
/* The profile is a sequence of vertical slides; the artwork rail stays horizontal. */
html:has(body.post-tale-flow) { scroll-snap-type:y proximity; }
body.post-tale-flow .profile-slide {
  box-sizing:border-box;min-height:100dvh;height:100dvh;overflow-y:auto;overflow-x:clip;
  scroll-snap-align:start;scroll-snap-stop:always;overscroll-behavior-y:contain;
}
body.post-tale-flow #artistic-curriculum { padding:clamp(28px,6svh,72px) var(--page-edge);align-content:center; }
body #artistic-curriculum[hidden] { display:none; }
body.post-tale-flow #art-gallery { display:flex;flex-direction:column;padding-block:28px 20px; }
body.post-tale-flow #art-gallery .gallery-wall { flex:1;min-height:0;height:auto; }
body.post-tale-flow #art-gallery .gallery-header,body.post-tale-flow #art-gallery .gallery-footer { flex:none; }
@keyframes profile-text-arrival {
  from { opacity:0;transform:translate3d(0,24px,0); }
  to { opacity:1;transform:translate3d(0,0,0); }
}
@media(prefers-reduced-motion:no-preference) {
  .is-profile-current :is(.about-copy,.about-highlights,.board-header,.resume-copy,.gallery-header,.artistic-cv-content,.testimonials-grid, .contact-email,.contact-socials),
  #artistic-curriculum.is-profile-current > header,
  #contact.is-profile-current > h2,
  #testimonials.is-profile-current > h2 { animation:profile-text-arrival 650ms cubic-bezier(.2,.7,.3,1) both; }
  .is-profile-current :is(.about-highlights,.resume-copy,.artistic-cv-content,.testimonials-grid,.contact-socials) { animation-delay:100ms; }
}
@media(max-width:760px) {
  body.post-tale-flow #artistic-curriculum { align-content:start; }
  body.post-tale-flow #art-gallery .gallery-wall { min-height:0; }
}
html.profile-transitioning:has(body.post-tale-flow) { scroll-snap-type:none; }
/* Align both text blocks to the portrait and the same left grid line. */
@media (min-width:761px) {
  body #about .about-copy { max-width:72ch; padding-top:0; margin-inline:0; position:relative; top:var(--about-text-inset,0px); }
  body #about .about-highlights { padding-bottom:0; margin-inline:0; position:relative; top:calc(-1 * var(--about-text-inset,0px)); }
}

/* Let text determine the row height when the viewport is constrained. */
@media (max-width: 1100px), (max-height: 820px) {
  body #about { grid-auto-rows: auto; grid-template-rows: auto auto; }
  body #about .about-copy,
  body #about .about-highlights { top: auto; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  body #about .character-frame { min-height: 300px; }
}
@media (max-width: 760px) {
  body #about { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body #about .about-copy,
  body #about .about-highlights,
  body #about .character-stage { grid-column: 1; grid-row: auto; }
}

/* Every Faya chapter starts on the cover title's grid line. */
body #faya-details {
  --faya-cover-inset: clamp(24px, 4vw, 66px);
}
body #faya-details .faya-case-panel:not(.faya-case-opening) {
  padding-inline: calc(var(--page-edge) + var(--faya-cover-inset)) var(--page-edge);
  column-gap: var(--grid-gap);
  min-width: 0;
}
body #faya-details .faya-case-opening .faya-case-intro {
  margin-inline-start: var(--faya-cover-inset);
}
@media (max-width: 700px) {
  body #faya-details { --faya-cover-inset: 0px; }
  body #faya-details .faya-case-panel:not(.faya-case-opening) { column-gap: 0; }
}

@media (min-width: 761px) {
  body #aquilo-details .aquilo-explore-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    column-gap: var(--grid-gap);
  }
  body #aquilo-details .aquilo-reflection {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  body #aquilo-details .aquilo-reflection p { max-width: 570px; }
  body #aquilo-details .aquilo-explore-layout > .faya-more-work {
    min-height: 0;
    grid-template-rows: auto 1fr auto;
  }
  body #aquilo-details .aquilo-explore .faya-more-work-links {
    align-self: center;
    min-height: 0;
    margin-block: 16px;
    gap: 6px;
    grid-template-rows: repeat(2, auto);
  }
  body #aquilo-details .aquilo-explore .faya-work-link {
    grid-template-rows: min(17svh, 146px) auto;
  }
}

/* Shared rails for the first and last panel of each case. */
body :is(#faya-details, #tale-details, #aquilo-details) {
  --case-grid-edge: calc(var(--page-edge) + clamp(0px, 3vw, 48px));
  --case-grid-columns: minmax(0, 2fr) minmax(0, 3fr);
  --case-grid-padding: clamp(24px, 5svh, 52px);
}

body #faya-details :is(.faya-case-opening, .faya-current-stage-section),
body #tale-details :is(.tale-case-opening, .tale-current-stage),
body #aquilo-details :is(.aquilo-case-opening, .aquilo-explore) {
  box-sizing: border-box;
  padding: var(--case-grid-padding) var(--case-grid-edge);
}

body #faya-details .faya-case-opening,
body #tale-details .tale-case-opening,
body #aquilo-details .aquilo-case-opening,
body #faya-details .faya-current-stage-layout,
body #tale-details .tale-case-chapter.tale-current-stage > .tale-current-layout,
body #aquilo-details .aquilo-explore-layout {
  display: grid;
  grid-template-columns: var(--case-grid-columns);
  gap: var(--grid-gap);
  align-content: center;
}

body :is(#faya-details .faya-case-opening .faya-case-intro,
         #tale-details .tale-case-opening .tale-detail-copy,
         #aquilo-details .aquilo-case-opening .aquilo-detail-copy) {
  top: auto;
  margin-inline: 0;
  align-self: center;
}

body :is(#faya-details .faya-case-opening .faya-demo,
         #tale-details .tale-case-opening .tale-detail-image,
         #aquilo-details .aquilo-case-opening .aquilo-detail-image) {
  align-self: center;
  justify-self: center;
}

body #faya-details .faya-case-opening .faya-demo img {
  max-height: min(64svh, 640px);
  object-fit: contain;
}

body #faya-details .faya-current-stage-layout,
body #tale-details .tale-case-chapter.tale-current-stage > .tale-current-layout,
body #aquilo-details .aquilo-explore-layout {
  width: 100%;
  align-items: start;
}

body #aquilo-details .aquilo-reflection { justify-content: flex-start; }

body :is(#faya-details .faya-current-stage-layout,
         #tale-details .tale-current-layout,
         #aquilo-details .aquilo-explore-layout) > .faya-more-work {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  justify-self: center;
  width: min(100%, 360px);
  min-height: 0;
  margin: 0;
}

body :is(#faya-details, #tale-details, #aquilo-details) .faya-more-work .faya-more-work-links {
  width: 100%;
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  min-height: 0;
  margin-block: 12px;
}

body :is(#faya-details, #tale-details, #aquilo-details) .faya-more-work .faya-work-link {
  grid-template-rows: clamp(72px, 16svh, 145px) auto;
  gap: 4px;
}

body :is(#faya-details, #tale-details, #aquilo-details) .faya-more-work .faya-work-link img {
  max-height: 100%;
  object-position: center;
}

body :is(#faya-details, #tale-details, #aquilo-details) .faya-more-work .faya-work-link > span { margin-top: 0; }

@media (max-width: 760px) {
  body :is(#faya-details, #tale-details, #aquilo-details) {
    --case-grid-edge: var(--page-edge);
    --case-grid-columns: minmax(0, 1fr);
    --case-grid-padding: 28px;
  }

  body #aquilo-details .aquilo-case-opening { grid-template-rows: auto auto; }
  body #aquilo-details .aquilo-case-opening .aquilo-detail-image { height: min(40svh, 360px); }
  body #faya-details .faya-case-opening .faya-demo img { max-height: 40svh; }
}

@media (min-width: 761px) {
  body :is(#faya-details .faya-case-opening .faya-case-intro,
           #tale-details .tale-case-opening .tale-detail-copy,
           #aquilo-details .aquilo-case-opening .aquilo-detail-copy,
           #faya-details .faya-case-opening .faya-demo,
           #tale-details .tale-case-opening .tale-detail-image,
           #aquilo-details .aquilo-case-opening .aquilo-detail-image) {
    align-self: end;
  }

  body #faya-details .faya-current-stage-layout,
  body #tale-details .tale-case-chapter.tale-current-stage > .tale-current-layout,
  body #aquilo-details .aquilo-explore-layout {
    align-items: stretch;
  }

  body :is(#faya-details .faya-current-stage-layout,
           #tale-details .tale-current-layout,
           #aquilo-details .aquilo-explore-layout) > .faya-more-work {
    grid-template-rows: auto 1fr auto;
    align-self: stretch;
  }

  body :is(#faya-details, #tale-details, #aquilo-details) .faya-more-work-links {
    align-self: center;
  }
}

@media (min-width: 761px) {
  body #faya-details .faya-case-opening .faya-demo {
    width: min(100%, 820px, calc(64svh * 2275 / 1626));
  }

  /* The laptop artwork has 176 transparent pixels below its visible base. */
  body #faya-details .faya-case-opening .faya-demo img {
    translate: 0 10.82%;
  }
}

/* Case gestures advance the horizontal track, including on short screens. */
body #faya-details .faya-case-panel,
body :is(#tale-details, #aquilo-details) .tale-case-track > article {
  overflow: clip;
  touch-action: pinch-zoom;
}

.faya-case-panel > *,
.tale-case-track > article > * {
  zoom: var(--case-content-scale, 1);
}

@media (max-width: 760px), (max-height: 700px) {
  body #faya-details .faya-case-panel,
  body :is(#tale-details, #aquilo-details) .tale-case-track > article {
    padding-block: 16px 48px;
  }

  body #faya-details .faya-case-opening .faya-demo { margin-block: 12px 0; }
  body #faya-details .faya-case-opening .faya-demo img { max-height: 36svh; }
}

@media (max-height: 700px) {
  body #tale-details .tale-case-track > .tale-case-decisions {
    padding-block-end: 64px;
  }

  body #tale-details .tale-book-flow > figcaption {
    align-self: start;
    margin-block: 0 8px;
  }

  body #tale-details .tale-book-flow .tale-decision-image img {
    height: min(45svh, 360px);
    max-height: 100%;
  }
}

/* Match the rendered laptop box to the scroll handoff on short viewports. */
@media (max-height: 700px) {
  body #faya-details .faya-case-opening .faya-demo {
    align-self: center;
    margin-block: 0;
    width: min(100%, 820px, calc(58svh * 2275 / 1626));
  }

  body #faya-details .faya-case-opening .faya-demo img {
    max-height: none;
    translate: none;
  }
}

@media (max-width: 760px) {
  body #faya-details .faya-case-opening .faya-demo {
    width: min(100%, calc(36svh * 2275 / 1626));
  }

  body #faya-details .faya-case-opening .faya-demo img {
    max-height: none;
  }
}

@media (max-height: 700px) {
  body #faya-details .faya-case-context .faya-context-content { min-height: 0; }
  body #faya-details .faya-case-context .faya-context-peony { min-height: 0; }
}

@media (max-width: 700px) {
  body #faya-details .faya-case-context .faya-context-peony {
    min-height: 0;
    height: min(24svh, 180px);
    margin-block: 0 12px;
  }

  body #faya-details .faya-case-context .faya-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width:760px) {
  [data-profile-continue] { display:none !important; }
  body :is(#faya-details,#tale-details,#aquilo-details) article { touch-action:pinch-zoom; }
  body.faya-hero-jumping #faya-details .faya-case-intro {
    opacity:var(--faya-intro-opacity,0);
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  :is(#faya-details, #tale-details, #aquilo-details) article.is-active h2 {
    animation: mobile-case-title-reveal 680ms cubic-bezier(.22, .8, .3, 1) both;
  }

  :is(#faya-details, #tale-details, #aquilo-details) article.is-active :is(h3, p, dt, dd, figcaption) {
    animation: mobile-case-copy-reveal 540ms cubic-bezier(.22, .8, .3, 1) 90ms both;
  }

  :is(#faya-details, #tale-details, #aquilo-details) article.is-active :is(p + p, dd, figcaption) {
    animation-delay: 155ms;
  }

  :is(#faya-details, #tale-details, #aquilo-details) article.is-active p + p + p {
    animation-delay: 210ms;
  }
}

@keyframes mobile-case-title-reveal {
  from { opacity: 0; clip-path: inset(0 -12px 100%); translate: 0 8px; }
  to { opacity: 1; clip-path: inset(-12px); translate: 0 0; }
}

@keyframes mobile-case-copy-reveal {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width:760px) {
  body #faya-details .faya-case-track,
  body :is(#tale-details,#aquilo-details) .tale-case-track {
    flex-direction:column;width:100%;height:100%;min-height:0;
  }
  body #faya-details .faya-case-track {
    transform:translate3d(0,calc(var(--faya-case-shift,0) * var(--faya-panel-count,5) * -1%),0) !important;
  }
  body :is(#tale-details,#aquilo-details) .tale-case-track {
    transform:translate3d(0,calc(var(--case-chapter-shift,0%) * var(--tale-chapter-count,6)),0) !important;
  }
  body #faya-details .faya-case-panel,
  body :is(#tale-details,#aquilo-details) .tale-case-track > article {
    flex:0 0 100%;width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pinch-zoom;
  }
  body #faya-details .faya-demo { visibility:visible; }
}


@media (max-width: 760px) {
  .hero-name-image { pointer-events: none; }
  .hero-name-image > :is(.hero-name-highlight, .signature-warp) { display: none; }
}

@media (max-width: 760px) {
  :is(#faya-details, #tale-details, #aquilo-details) article.is-active:nth-child(2) :is(h2, h3, p, dt, dd, figcaption),
  #faya-details .faya-case-context .faya-peony-frame {
    animation: none;
    transition: none;
  }

  .tale-context-play { display: none; }
}

@media (max-width: 760px) {
  body #faya-details .faya-case-panel,
  body :is(#tale-details, #aquilo-details) .tale-case-track > article {
    padding-block: clamp(12px, 2.8dvh, 24px) 48px;
    row-gap: clamp(8px, 2dvh, 18px);
  }

  body #faya-details .faya-case-opening .faya-demo img,
  body #tale-details :is(.tale-detail-image, .tale-context-image),
  body #aquilo-details :is(.aquilo-case-opening img, .aquilo-media img) {
    max-height: 28dvh;
    object-fit: contain;
  }
}

@media (max-width: 760px) {
  body .hero-surface { --hero-laptop-width: calc(min(52vw, 30svh, 250px) * 1.21275 * .85); }
  body .hero-surface .project--tale.project-1 { width: calc(min(33vw, 24svh, 170px) * 1.157625 * .85); }
  body .hero-surface .project--aquilo.project-3 { width: calc(min(28vw, 21svh, 145px) * 1.1025 * .85); }
  body .hero-surface .project > img { filter: none !important; }
  body .hero-surface :is(.project--tale, .project--aquilo) { margin-top: clamp(8px, 2svh, 18px); }
}

@media (min-width: 761px) {
  body #about .about-highlights {
    margin-block-start: clamp(20px, 4svh, 40px);
  }
}

@media (min-width: 761px) {
  body .hero-surface .project--faya { animation: none; }
}

body #tale-details .tale-context-still { display: none; }
@media (max-width: 760px) {
  body #tale-details [data-tale-animation] { display: none; }
  body #tale-details .tale-context-still { display: block; }
  body #faya-details .faya-context-peony .faya-peony-frame:not(:last-child) { display: none; }
  body #faya-details .faya-context-peony .faya-peony-frame:last-child { opacity: 1; }
}

@media (max-width: 760px) {
  body .hero-surface {
    min-height: 100dvh;
    --hero-content-drop: clamp(14px, 4dvh, 34px);
  }

  body .hero-surface .site-nav {
    bottom: max(clamp(22px, 7dvh, 56px), env(safe-area-inset-bottom));
  }

  html.mobile-hero-locked #faya-details {
    visibility: hidden;
  }
}

@media (max-width: 760px) {
  body .hero-surface .site-nav {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(2px, 1.4vw, 12px);
    inset-inline: 8px;
    bottom: max(20px, env(safe-area-inset-bottom));
  }

  body .hero-surface .site-nav a {
    color: #a8545a;
    padding-inline: clamp(2px, .8vw, 6px);
    font-size: clamp(.55rem, 2.65vw, .75rem);
    letter-spacing: .035em;
    white-space: nowrap;
  }

  body .hero-surface .project--tale.project-1 {
    max-width: 18dvh;
  }

  body .hero-surface .project--aquilo.project-3 {
    max-width: 22dvh;
  }
}

@media (max-width: 760px) {
  html:has(body.post-tale-flow) { scroll-snap-type: none; }

  body :is(#faya-details, #tale-details, #aquilo-details) {
    height: auto;
    overflow: visible;
  }

  body #faya-details .faya-case-track,
  body :is(#tale-details, #aquilo-details) .tale-case-track {
    display: block;
    height: auto;
    transform: none !important;
    transition: none;
  }

  body #faya-details .faya-case-panel,
  body :is(#tale-details, #aquilo-details) .tale-case-track > article {
    height: auto;
    overflow: visible;
    touch-action: auto;
    padding-block: 24px 36px;
  }

  body :is(#faya-details, #tale-details, #aquilo-details) .tale-chapter-controls { display: none; }

  body :is([role="tablist"], .tale-flow-controls) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    touch-action: pan-x pan-y;
  }

  body :is([role="tablist"], .tale-flow-controls) > button {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  body :is(#faya-details, #tale-details, #aquilo-details) article.is-active :is(h2, h3, p, dt, dd, figcaption) {
    animation: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  body :is(#faya-details, #tale-details, #aquilo-details) article .mobile-case-text-visible {
    animation: mobile-case-rise 440ms cubic-bezier(.2,.7,.3,1) both;
  }
}

@keyframes mobile-case-rise {
  from { opacity: .4; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

@media (max-width: 760px) {
  #top :is(.section-lettering, .contact-lettering) { filter: url(#rose); }
  #top #faya-details-title .section-lettering { filter: url(#faya-clean); }
}