/* Hallmark v2.0.0 | theme: reference-led custom | genre: editorial | shape: portfolio folio | hero: oversized name and botanical watercolor | signature: Cecilia flower | posture: restrained | axes: dark/roman-serif/cool */
/* critique: The cover carries the visual identity. Each featured project uses a different kind of evidence. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/cormorant-garamond-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif SC";
  src: url("assets/noto-serif-sc-site.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --cover: #2e4b53;
  --cover-deep: #142b32;
  --petal: #f4f6eb;
  --accent: #d6e4b7;
  --paper: #eef2eb;
  --paper-low: #e2ebe5;
  --panel: #f6f8f2;
  --ink: #213c43;
  --ink-soft: #4c605b;
  --hairline: #a7b7ad;
  --dark-rule: #7e9597;
  --dark-quiet: #d3dfdd;
  --focus: #3f684f;
  --clear: transparent;
  --shadow: #0d222950;
  --negative: #284a58;
  --positive: #64836e;
  --neutral: #9da9a0;
  --missing: #cbd5cc;
  --page-font: "Cormorant Garamond", "Noto Serif SC", "Songti SC", SimSun, Georgia, serif;
  --measure: 74rem;
  --gutter: clamp(1.25rem, 6vw, 5rem);
  --gap: clamp(1.5rem, 5vw, 4.8rem);
  --chapter: clamp(3.6rem, 7vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: italic 500 1rem/1.78 var(--page-font); font-synthesis: none; }
img { display: block; max-inline-size: 100%; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { overflow-wrap: break-word; min-width: 0; font-weight: 500; }
h1, h2 { text-wrap: balance; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .3em; text-decoration-thickness: .06em; }
button { color: inherit; font: inherit; }
a, button, summary { -webkit-tap-highlight-color: var(--clear); }
:is(a, button, summary):focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.cover :focus-visible, .closing :focus-visible { outline-color: var(--accent); }
summary { cursor: pointer; }
.wrap { width: min(var(--measure), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip {
  position: absolute; z-index: 5; top: .5rem; left: .5rem;
  padding: .6rem 1rem; background: var(--paper); color: var(--ink);
  transform: translateY(-170%);
}
.skip:focus { transform: translateY(0); }

.cover {
  min-height: 100svh;
  color: var(--petal);
  background: radial-gradient(ellipse at 74% 36%, var(--cover), var(--cover-deep) 86%);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.cover::before, .cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid var(--dark-rule);
  opacity: .23;
  border-radius: 50%;
}
.cover::before { inline-size: 135%; block-size: 54%; top: 43%; left: -19%; transform: rotate(-16deg); }
.cover::after { inline-size: 88%; block-size: 78%; top: 18%; right: -26%; transform: rotate(31deg); }
.cover-nav {
  position: relative;
  z-index: 2;
  min-height: 4.6rem;
  border-bottom: 1px solid var(--dark-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark { font-size: 2.7rem; line-height: .9; text-decoration: none; }
.nav-links, .text-links, .footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.8rem;
}
.nav-links a { padding-block: .7rem; color: var(--dark-quiet); font-size: .91rem; text-decoration: none; }
.nav-links a:hover, .footer-links a:hover, .cover-action:hover { color: var(--accent); }
.cover-body {
  min-height: max(34rem, calc(100svh - 4.6rem));
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  position: relative;
  padding-block: 2rem 2.5rem;
}
.cover-copy { position: relative; z-index: 1; padding-block: 1rem; }
.cover h1 {
  font-size: clamp(5.8rem, 15.5vw, 15rem);
  line-height: .92;
  letter-spacing: -.04em;
}
.cover-name { display: block; }
.cover-turn { display: none; }
.cover-affiliation { color: var(--petal); margin-top: 1.65rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.cover-degree { display: inline-block; }
.cover-degree::before { content: "·"; margin-inline: .45em; }
.cover-interests { color: var(--dark-quiet); margin-top: .45rem; max-width: 32em; }
.cover-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  min-width: 8.5rem;
  gap: 1rem;
  padding: .4rem .85rem;
  border: 1px solid var(--dark-rule);
  margin-top: 1.25rem;
  text-decoration: none;
}
.cover-action:hover { border-color: var(--accent); }
.cover-action span { font-size: 1.35rem; line-height: 1; color: var(--accent); }
.botanical {
  width: min(100%, 33rem);
  height: min(68svh, 39rem);
  object-fit: contain;
  justify-self: center;
  pointer-events: none;
}
.work-front {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: var(--gap);
  min-height: min(72svh, 43rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}
.work-front-title {
  font-size: clamp(3.35rem, 7.1vw, 7.3rem);
  line-height: 1.06;
  letter-spacing: -.065em;
}
.work-front-art { width: 100%; height: auto; }
.recalculate button, .draft button {
  cursor: pointer;
  min-height: 44px;
  padding-inline: .7rem;
  border: 1px solid currentColor;
  background: transparent;
}

.contents {
  scroll-margin-top: 1rem;
  padding-block: 2.15rem;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem var(--gap);
  align-items: center;
}
.contents span { grid-column: 1 / -1; color: var(--ink-soft); font-size: .84rem; }
.contents a { display: flex; align-items: center; min-height: 44px; text-decoration: none; padding-block: .4rem; }
.contents a:hover, .text-links a:hover, .project-note a:hover { text-decoration: underline; }
.feature { padding-block: var(--chapter); }
.feature-header {
  margin-bottom: clamp(1.8rem, 5vw, 3.8rem);
}
.display { font-size: clamp(4.6rem, 13vw, 11rem); line-height: .85; letter-spacing: -.032em; }
.display.chinese { font-size: clamp(2.8rem, 7.4vw, 6.7rem); line-height: 1.1; letter-spacing: -.065em; }
.subtitle { margin-top: 1.3rem; color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); }
.feature-intro { font-size: clamp(1rem, 1.8vw, 1.23rem); max-width: 37em; margin-top: .75rem; }
.feature-header.with-art {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  align-items: center;
  gap: 1.25rem var(--gap);
}
.chapter-art { display: block; justify-self: center; width: 100%; }
.chapter-art img { width: 100%; height: auto; }
.ledger-art { max-width: 26rem; }
.text-links { margin-top: 1.3rem; font-size: .94rem; }
.text-links a, .project-note a { display: inline-block; padding-block: .35rem; }
.project-title { text-decoration: none; }
.project-title::after {
  content: "";
  display: inline-block;
  width: .12em;
  height: .12em;
  margin-inline-start: .13em;
  vertical-align: .48em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  color: var(--ink-soft);
}
.project-title:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .12em;
}
.preview-link { display: block; }
.preview-link:is(:hover, :focus-visible) img { border-color: var(--ink); }
.app-demo figcaption a { display: inline-block; margin-inline-start: .55em; color: var(--ink); }
#verifier-demo { scroll-margin-top: 1.25rem; }

.case-mast .cover-nav { border-color: var(--hairline); }
.case-mast a { padding-block: .6rem; }
.case-mast a[lang] { font-size: 1.6rem; text-decoration: none; }
.case-mast a[lang]:hover { text-decoration: underline; }
.case-study { padding-block: clamp(2.8rem, 7vw, 6.4rem) 4rem; }
.case-lead { border-bottom: 1px solid var(--hairline); padding-bottom: clamp(1.7rem, 4vw, 3.4rem); }
.case-lead h1 { font-size: clamp(2.8rem, 7vw, 6rem); }
.case-lead p { max-width: 36em; margin-top: 1.25rem; font-size: clamp(1.05rem, 2vw, 1.25rem); }
.case-lead .case-type { margin: 0 0 .75rem; font-size: .9rem; color: var(--ink-soft); }
.case-content { max-width: 46rem; }
.case-content section { margin-block: 2.4rem; scroll-margin-top: 1.3rem; }
.case-content h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.case-content h3 { font-size: 1.24rem; }
.case-content p + p { margin-top: .7rem; }
.case-content .archive { margin-top: 1rem; }
.case-content .archive summary { grid-template-columns: minmax(0, 1fr) auto; min-height: 3.4rem; }
.case-content .archive summary::after { grid-column: 2; grid-row: 1; }
.case-content .archive summary:hover { text-decoration: underline; }
.case-example { padding: 1rem 1.2rem; background: var(--paper-low); border-left: 2px solid var(--hairline); }
.case-example blockquote { margin: .75rem 0; font-size: 1.32rem; }
.poem-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
.poem-reading img { width: 100%; height: auto; }
.poem-notes p { padding: .5rem; scroll-margin-top: 1.5rem; }
.poem-notes p:target, .case-example a:target { background: var(--panel); box-shadow: 0 0 0 1px var(--focus); }
.case-metrics { margin: 1rem 0; }
.case-metrics div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; padding: .65rem 0; border-top: 1px solid var(--hairline); scroll-margin-top: 1.2rem; }
.case-metrics div:target { background: var(--paper-low); }
.case-metrics dt { font-weight: 600; }
.case-metrics dd:last-child { grid-column: 1 / -1; color: var(--ink-soft); }
.case-back { border-top: 1px solid var(--hairline); padding-top: 1.15rem; }
.app-demo { border-top: 1px solid var(--hairline); }
.switch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.6rem;
  align-items: center;
  padding-block: .55rem;
}
.switch-bar button {
  min-height: 44px;
  cursor: pointer;
  padding: .45rem .15rem .38rem;
  border: 0;
  border-bottom: 1px solid var(--clear);
  background: var(--clear);
  color: var(--ink-soft);
  font-size: .92rem;
}
.switch-bar button:hover, .switch-bar button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.switch-bar button:active { transform: translateY(1px); }
.switch-bar button:disabled { opacity: .55; cursor: not-allowed; }
.app-demo figure { margin-bottom: 1.4rem; }
.app-demo img {
  width: 100%;
  height: auto;
  max-height: 39rem;
  object-fit: contain;
  object-position: center top;
  background: var(--panel);
  border: 1px solid var(--hairline);
}
.app-demo figcaption { padding-top: .7rem; color: var(--ink-soft); font-size: .9rem; }
.project-note { margin-top: 1.55rem; color: var(--ink-soft); max-width: 44rem; }
.project-note a { color: var(--ink); }

.data-section { background: var(--paper-low); border-block: 1px solid var(--hairline); }
.data-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.8rem var(--gap);
  align-items: center;
  padding-block: 2.2rem .55rem;
  border-top: 1px solid var(--hairline);
}
.big-stat .display { font-size: clamp(5rem, 13vw, 11.5rem); line-height: .94; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: .32em; line-height: 1; padding-left: .22em; }
.big-stat p, .small { color: var(--ink-soft); font-size: .9rem; font-variant-numeric: tabular-nums; }
.data-detail h3, .evidence h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.45; }
.chart-hint { margin-top: .35rem; }
.data-detail:has(.bar[hidden]) .chart-hint { display: none; }
.bar { flex-wrap: nowrap; gap: 3px; padding: 0; }
.bar button { position: relative; min-width: 0; border: 0; padding: 0; }
.bar button::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: .7rem;
  translate: 0 -50%;
  background: var(--segment);
}
.bar button:is(:hover, :focus-visible, [aria-pressed="true"])::before { outline: 1px solid var(--ink); outline-offset: 2px; }
.bar button:nth-child(1) { flex: 6472141; --segment: var(--positive); }
.bar button:nth-child(2) { flex: 9104216; --segment: var(--neutral); }
.bar button:nth-child(3) { flex: 10208923; --segment: var(--negative); }
.bar button:nth-child(4) { flex: 2865880; --segment: var(--missing); }
.chart-readout { margin-top: 1rem; padding: .75rem .9rem; min-height: 4rem; border-left: 1px solid var(--focus); background: var(--paper); }
.chart-readout strong { margin-inline-end: .4rem; }
.legend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem 1rem;
  font-size: .93rem;
}
.legend div { position: relative; border-top: 1px solid var(--hairline); padding-top: .5rem; }
.legend div:nth-child(1) { border-color: var(--positive); }
.legend div:nth-child(2) { border-color: var(--neutral); }
.legend div:nth-child(3) { border-color: var(--negative); }
.legend div:nth-child(4) { border-color: var(--missing); }
.legend dt { color: var(--ink-soft); font-size: .86rem; }
.legend a::after { content: ""; position: absolute; inset: 0; }
.legend div:focus-within, .legend div:hover { color: var(--ink); background: var(--paper); }
.legend dd { font-variant-numeric: tabular-nums; }
.method { margin-top: 1.2rem; font-size: .88rem; color: var(--ink-soft); }
.method summary { padding-block: .55rem; color: var(--ink); }

.evidence {
  border-block: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 1.4rem var(--gap);
  padding-block: 2rem;
}
.statement { font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.5; margin-block: .65rem .6rem; }
.evidence-views { min-height: 12.5rem; }
.evidence-views p { margin-top: .8rem; }
.evidence-views [data-view]:not([hidden]) + [data-view]:not([hidden]) { margin-top: 1.4rem; }
.evidence-views .calculation { font-size: clamp(1.5rem, 4vw, 2.45rem); line-height: 1.24; }
.recalculate { display: flex; flex-wrap: wrap; gap: .65rem; align-items: end; margin-top: 1rem; }
.recalculate label { font-size: .86rem; color: var(--ink-soft); }
.recalculate input, .draft textarea { display: block; min-height: 44px; padding: .35rem .55rem; border: 1px solid var(--hairline); background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; }
.recalculate input { width: 8rem; }
.draft { margin-top: 1rem; }
.draft textarea { width: 100%; resize: vertical; margin-block: .4rem .65rem; }
:is(.recalculate input, .draft textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.recalculate, .draft) button { color: var(--ink-soft); font-size: .9rem; }
:is(.recalculate, .draft) button:hover { color: var(--ink); background: var(--panel); }
table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
caption { text-align: left; color: var(--ink-soft); font-size: .86rem; padding-bottom: .6rem; }
th, td { border-bottom: 1px solid var(--hairline); text-align: left; padding: .7rem .6rem .7rem 0; font-weight: 400; }
thead th { font-size: .89rem; color: var(--ink-soft); }

.more-work { padding-block: .8rem var(--chapter); }
.archive-face { background: var(--paper-low); border-top: 1px solid var(--hairline); }
.archive-face .more-work { padding-block-start: var(--chapter); }
.more-work .display { font-size: clamp(2.5rem, 5.8vw, 4.65rem); margin-bottom: 2rem; }
.archive-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap); }
.poem-art { max-width: 33rem; text-align: center; text-decoration: none; }
.poem-art span { display: block; width: fit-content; margin: .35rem auto 0; text-decoration: underline; text-underline-offset: .3em; }
.archive { border-top: 1px solid var(--hairline); }
.archive details { border-bottom: 1px solid var(--hairline); }
.archive summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .65fr) auto;
  gap: .5rem 1.25rem;
  align-items: center;
  min-height: 5.2rem;
  padding: 1rem 0;
}
.archive summary::-webkit-details-marker { display: none; }
.archive summary::after { content: "+"; font-size: 1.65rem; line-height: 1; }
.archive details[open] summary::after { content: "−"; }
.archive summary:hover span:first-child { text-decoration: underline; }
.archive summary span:first-child { font-size: clamp(1.2rem, 3vw, 2rem); line-height: 1.2; }
.archive summary span:nth-child(2), .archive p { color: var(--ink-soft); }
.archive p { max-width: 43rem; padding-bottom: 1.45rem; }
.archive-entry { padding-block: .95rem; border-bottom: 1px solid var(--hairline); scroll-margin-top: 1rem; }
.archive-entry:target { box-shadow: inset 2px 0 var(--focus); padding-inline-start: .7rem; }
.archive-entry h3 { font-size: clamp(1.45rem, 4vw, 2.4rem); line-height: 1.35; }
.archive-entry > p { color: var(--ink-soft); margin-top: .25rem; padding: 0; }

.closing { background: var(--cover-deep); color: var(--petal); padding-block: var(--chapter) 2rem; }
.closing .display { font-size: clamp(3.4rem, 9vw, 8.4rem); }
.closing p { max-width: 30em; color: var(--dark-quiet); margin-top: 1.4rem; font-size: 1.13rem; }
.footer-links { margin-top: 2rem; }
.footer-links a { display: inline-block; padding-block: .5rem; }
.footer-line {
  border-top: 1px solid var(--dark-rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding-top: 1.25rem;
  margin-top: clamp(2.4rem, 6vw, 5rem);
  color: var(--dark-quiet);
  font-size: .84rem;
}

@media (max-width: 58rem) {
  .contents { gap: .3rem 1rem; }
}
@media (max-width: 44rem) {
  .cover-nav { min-height: 4.3rem; }
  .nav-links { gap: .35rem 1rem; }
  .cover-body {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding-block: .75rem 2.5rem;
  }
  .cover { min-height: min(100svh, 44rem); }
  .cover h1 { font-size: clamp(4.65rem, 23.5vw, 8.75rem); }
  .botanical {
    grid-row: 1;
    justify-self: end;
    width: min(66%, 18rem);
    height: clamp(10rem, 29svh, 17rem);
    object-position: right top;
  }
  .work-front { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-height: 0; padding-block: 3rem 1.75rem; }
  .cover-copy { padding-block: 0; }
  .cover-affiliation { margin-top: 1rem; }
  .cover-degree { display: block; }
  .cover-degree::before { content: none; }
  .cover-action { margin-top: .95rem; }
  .contents { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 1.3rem; }
  .contents a { white-space: normal; font-size: .95rem; }
  .feature-header.with-art, .data-feature, .evidence, .archive-spread, .poem-reading { grid-template-columns: minmax(0, 1fr); }
  .ledger-art { max-width: 20rem; }
  .poem-art { max-width: 26rem; }
  .subtitle { margin-top: .8rem; }
  .feature-header { margin-bottom: 1.7rem; }
  .data-feature { padding-block: 1.6rem .3rem; }
  .evidence-views { min-height: 10.3rem; }
  .legend { gap: .45rem; font-size: .81rem; }
  .archive summary { grid-template-columns: minmax(0, 1fr) auto; }
  .archive summary span:nth-child(2) { grid-row: 2; font-size: .9rem; }
  .archive summary::after { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 23rem) {
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .big-stat .display { font-size: clamp(4.2rem, 19vw, 5rem); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  .contents a { justify-self: start; }
  .contents a, .text-links a {
    text-decoration: none;
    background: linear-gradient(var(--ink), var(--ink)) left bottom / 0 1px no-repeat;
    transition: background-size .24s cubic-bezier(.2, .7, .3, 1);
  }
  .contents a:is(:hover, :focus-visible), .text-links a:is(:hover, :focus-visible) {
    background-size: 100% 1px;
    text-decoration: none;
  }
  .switch-bar button { transition: color .18s ease, border-color .18s ease; }
  .panel-enter { animation: panel-arrival .46s cubic-bezier(.2, .75, .3, 1) both; }
  .chapter-art img { transition: transform .32s cubic-bezier(.2, .75, .3, 1); }
  .chapter-art:is(:hover, :focus-visible) img { transform: translateY(-4px); }
  .archive details[open] p { animation: panel-arrival .34s cubic-bezier(.2, .75, .3, 1) both; }
  .archive summary::after { transition: transform .26s cubic-bezier(.2, .75, .3, 1); }
  .archive details[open] summary::after { content: "+"; transform: rotate(45deg); }
  @keyframes panel-arrival {
    from { opacity: .18; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 45rem) and (min-height: 690px) {
  .motion-enabled .cover-track { position: relative; min-height: 145svh; }
  .motion-enabled .cover { position: sticky; top: 0; overflow: clip; }
  .motion-enabled .paper > .work-front { display: none; }
  .motion-enabled .cover h1 {
    opacity: var(--name-opacity, 1);
    transform-origin: 12% center;
    transform: perspective(1100px) translate3d(var(--name-shift, 0), var(--name-lift, 0), 0)
      rotateY(var(--name-angle, 0deg)) rotateX(var(--name-tilt, 0deg)) scale(var(--name-scale, 1));
  }
  .motion-enabled .cover-name {
    animation: name-arrival .85s cubic-bezier(.21, .75, .32, 1) both;
  }
  .motion-enabled .cover-copy > p, .motion-enabled .cover-action { opacity: var(--hint-opacity, 1); }
  .motion-enabled .botanical {
    opacity: var(--flower-opacity, 1);
    transform: translate3d(var(--flower-shift, 0), var(--flower-lift, 0), 0) scale(var(--flower-scale, 1));
  }
  .motion-enabled .feature-header h2 {
    --ink-progress: var(--force-ink, var(--heading-ink, 1));
    opacity: calc(.18 + .82 * var(--ink-progress));
    clip-path: inset(-14% -12% calc(83% - 100% * var(--ink-progress)) -12%);
    transform-origin: left bottom;
    transform: perspective(1000px) translateY(calc(27px * (1 - var(--ink-progress))))
      rotateX(calc(-13deg * (1 - var(--ink-progress))));
  }
  .motion-enabled .feature-header .subtitle {
    --ink-progress: var(--force-ink, var(--subtitle-ink, 1));
    opacity: calc(.38 + .62 * var(--ink-progress));
    transform: translateY(calc(8px * (1 - var(--ink-progress))));
  }
  .motion-enabled :is(#acaora, #sentiment, #verifier):target .feature-header,
  .motion-enabled .feature-header:focus-within { --force-ink: 1; }
  .motion-enabled .bar {
    transform: scaleX(var(--chart-ink, 1));
    transform-origin: left center;
  }
  .motion-enabled .bar:focus-within { transform: none; }
  .motion-enabled .cover-turn {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(-14px 0 22px var(--shadow));
  }
  .motion-enabled .cover-leaf {
    position: absolute;
    inset: 0;
    clip-path: ellipse(var(--cover-fold, 0%) 142% at 111% 54%);
    background: var(--paper);
    color: var(--ink);
  }
  .motion-enabled .cover-leaf-body {
    min-height: 100%;
    opacity: var(--leaf-ink, 0);
    transform: translateY(var(--leaf-rise, 20px));
  }
  .motion-enabled .cover:has(:focus-visible) .cover-turn { visibility: hidden; }
  .motion-enabled .cover-action:focus-visible { opacity: 1; }
  .motion-enabled .cover.is-turned .cover-nav:not(:focus-within),
  .motion-enabled .cover.is-turned .cover-action:not(:focus-visible) { visibility: hidden; }
  .motion-enabled .folio-sheet { position: relative; z-index: 1; }
  .motion-enabled .folio-face {
    clip-path: ellipse(var(--folio-fold, 170%) 146% at 111% 56%);
    transform: translateY(var(--folio-lift, 0));
  }
  .motion-enabled .folio-face h2 {
    opacity: calc(var(--folio-ink, 1) * var(--folio-retain, 1));
    transform-origin: left center;
    transform: perspective(1000px) translate3d(var(--folio-shift, 0), var(--folio-exit-lift, 0), 0)
      rotateX(calc(var(--folio-angle, 0deg) + var(--folio-exit-angle, 0deg)));
  }
  .motion-enabled .folio-sheet:is(:target, :has(.archive-entry:target)) .folio-face,
  .motion-enabled .folio-sheet:focus-within .folio-face {
    clip-path: none;
    transform: none;
  }
  .motion-enabled .folio-sheet:is(:target, :has(.archive-entry:target)) h2,
  .motion-enabled .folio-sheet:focus-within h2 {
    opacity: 1;
    transform: none;
  }
  @keyframes name-arrival {
    from { opacity: .15; transform: translateY(.14em); clip-path: inset(0 0 82% 0); }
    to { opacity: 1; transform: none; clip-path: inset(-15% -6% -15% -6%); }
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 45rem) and (min-height: 690px) and (hover: hover) and (pointer: fine) {
  .motion-enabled .botanical {
    translate: var(--flower-pointer-x, 0px) var(--flower-pointer-y, 0px);
    transition: translate .52s cubic-bezier(.19, .72, .31, 1);
  }
}