/*
  The mended vessel: the Ronova shell, 2026-11-09.

  Bone-ash ceramic, sumi and kintsugi. The repair stays visible; the vessel is implied by its shards.
  Layered after whichever stored site stylesheet a route snapshot still references, so it restates
  semantic --tds-* values and component rules rather than depending on one base revision.
  Motion variables come from /scripts/vessel-20261109-1.js and default to their settled values:
  --e (an element entering), --p (a pinned scene), --hp (the home hero), --sp (a stretch of seam).
*/

html body[data-shell-identity="vessel"][data-tds-product="ronova"] {
  --tds-paper: #f7f1e6;
  --tds-paper-raised: #eee6d6;
  --tds-mist: #e6decd;
  --tds-moon: #fbf7ee;
  --tds-ink: #342f2a;
  --tds-ink-muted: #5f574e;
  --tds-rule: rgba(52, 47, 42, 0.15);
  --tds-rule-strong: rgba(52, 47, 42, 0.34);
  --tds-night: #1a1714;
  --tds-night-surface: #1f1b17;
  --tds-night-raised: #25211c;
  --tds-night-text: #ede6d8;
  --tds-night-text-muted: #b4ab9c;
  --tds-night-rule: rgba(237, 230, 216, 0.16);
  --tds-interaction-hover-scale: 1.03;
  --vessel-measure: 62ch;
  --vessel-edge: max(var(--tds-page-gutter), calc((100vw - var(--tds-width-wide)) / 2));
  --vessel-settle: cubic-bezier(0.22, 0.7, 0.18, 1);
  --radius-xl: 6px;
  --radius-lg: 6px;
  --radius-md: 4px;
  --page-max-width: calc(100vw - (var(--tds-page-gutter) * 2));
  --page-wide-max-width: var(--page-max-width);
  --shell: min(var(--tds-width-wide), var(--page-max-width));
  position: relative;
  overflow-x: clip;
  font-size: var(--tds-type-body);
  letter-spacing: -0.012em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"],
html body[data-shell-identity="vessel"][data-tds-product="ronova"][data-tds-mode="light"] {
  color-scheme: light;
  --tds-bg: var(--tds-paper);
  --tds-surface-raised: var(--tds-paper-raised);
  --tds-text: var(--tds-ink);
  --tds-text-muted: var(--tds-ink-muted);
  --tds-border: var(--tds-rule);
  --tds-border-strong: var(--tds-rule-strong);
  --tds-accent: #342f2a;
  --tds-accent-contrast: #f7f1e6;
  --tds-highlight: #6f5710;
  --bg: var(--tds-paper);
  --text: var(--tds-ink);
  --text-soft: var(--tds-ink);
  --text-muted: var(--tds-ink-muted);
  --line: var(--tds-rule);
  --line-strong: var(--tds-rule-strong);
  --accent: #342f2a;
  --accent-strong: #342f2a;
  --accent-secondary: #6f5710;
  --seam: #b08d3a;
  --seam-text: #6f5710;
  --seam-a: #8f6f22;
  --seam-b: #d9b95f;
  --oxide: #8c4a32;
  --vessel-grain: url("/images/vessel/bone-grain.svg");
  --vessel-crazing: url("/images/vessel/crazing-bone.svg");
  --vessel-run: url("/images/vessel/ash-run-bone.svg");
  --v-clay: #9a6344;
  --v-glaze: #3b332c;
  --v-glaze-stone: #4a4037;
  --v-inside: #1f1a16;
  --v-speck: #8a7b66;
  --v-lip: #71624f;
  --v-ground: rgba(52, 47, 42, 0.13);
  --v-crack: rgba(247, 241, 230, 0.28);
  --v-seam: #d9b95f;
  --v-shade-0: rgba(255, 248, 232, 0.16);
  --v-shade-1: rgba(255, 248, 232, 0);
  --v-shade-2: rgba(0, 0, 0, 0.34);
  --v-line: rgba(52, 47, 42, 0.5);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"][data-tds-mode="night"] {
  color-scheme: dark;
  --tds-bg: var(--tds-night);
  --tds-surface-raised: var(--tds-night-raised);
  --tds-text: var(--tds-night-text);
  --tds-text-muted: var(--tds-night-text-muted);
  --tds-border: var(--tds-night-rule);
  --tds-border-strong: rgba(237, 230, 216, 0.4);
  --tds-accent: #ede6d8;
  --tds-accent-contrast: #1a1714;
  --tds-highlight: #d6b463;
  --bg: var(--tds-night);
  --text: var(--tds-night-text);
  --text-soft: var(--tds-night-text);
  --text-muted: var(--tds-night-text-muted);
  --line: var(--tds-night-rule);
  --line-strong: rgba(237, 230, 216, 0.32);
  --accent: #ede6d8;
  --accent-strong: #ede6d8;
  --accent-secondary: #d6b463;
  --seam: #c9a24a;
  --seam-text: #d6b463;
  --seam-a: #94741f;
  --seam-b: #e0c170;
  --oxide: #c47f62;
  --vessel-grain: url("/images/vessel/kiln-grain.svg");
  --vessel-crazing: url("/images/vessel/crazing-kiln.svg");
  --vessel-run: url("/images/vessel/ash-run-kiln.svg");
  --v-clay: #8e5e43;
  --v-glaze: #d9d1c1;
  --v-glaze-stone: #b9b0a0;
  --v-inside: #a79e8c;
  --v-speck: #6c5e4c;
  --v-lip: #f2ebdd;
  --v-ground: rgba(0, 0, 0, 0.42);
  --v-crack: rgba(52, 47, 42, 0.42);
  --v-seam: #b98f33;
  --v-shade-0: rgba(255, 255, 255, 0.2);
  --v-shade-1: rgba(255, 255, 255, 0);
  --v-shade-2: rgba(0, 0, 0, 0.26);
  --v-line: rgba(237, 230, 216, 0.44);
}

html[data-preference-contrast="high"] body[data-shell-identity="vessel"][data-tds-product="ronova"] {
  --tds-ink-muted: var(--tds-ink);
  --tds-night-text-muted: var(--tds-night-text);
  --tds-rule: rgba(52, 47, 42, 0.6);
  --tds-rule-strong: rgba(52, 47, 42, 0.9);
  --tds-night-rule: rgba(237, 230, 216, 0.6);
}

/* Ground ---------------------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] {
  background-color: var(--tds-bg);
  background-image: var(--vessel-grain);
  background-size: 900px 900px;
  color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 15rem;
  background: var(--vessel-run) top center / 100% 100% no-repeat;
  pointer-events: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-backdrop {
  display: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] main,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer {
  position: relative;
  z-index: 1;
}

/* Vessels and cracks reach past the page edge on purpose; clip keeps sticky scenes working. */
html body[data-shell-identity="vessel"][data-tds-product="ronova"] main {
  overflow-x: clip;
}

html:has(body[data-shell-identity="vessel"]) {
  overflow-x: clip;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :focus-visible {
  outline: 2px solid var(--seam-text);
  outline-offset: 3px;
}

/* Type ------------------------------------------------------------------------------------ */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(h1, h2, h3) {
  color: var(--tds-text);
  font-weight: 400;
  text-wrap: balance;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .page-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.section-heading h2, .prose h2) {
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.22;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .eyebrow {
  margin: 0 0 var(--tds-space-4);
  color: var(--oxide);
  font-size: var(--tds-type-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

html:is([lang="ja"], [lang="zh-Hant"]) body[data-shell-identity="vessel"][data-tds-product="ronova"] .eyebrow {
  letter-spacing: 0.32em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(p, li) {
  color: inherit;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .page-hero__note {
  max-width: 46ch;
  color: var(--tds-text-muted);
  font-size: var(--tds-type-lede);
  line-height: 1.6;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] a:not(.button):not(.site-brand):not(.site-nav__link):not(.site-header__action):not(.site-drawer__link) {
  color: inherit;
  text-decoration-color: var(--seam);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* Header ---------------------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header {
  background: var(--tds-bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--tds-border);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__shell {
  width: var(--shell);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__inner {
  gap: var(--tds-space-6);
  min-height: var(--tds-shell-header-height);
  padding-block: var(--tds-space-2);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--tds-space-3);
  color: var(--tds-text);
  text-decoration: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-brand__logo {
  display: block;
  flex: 0 0 auto;
  width: 4.1rem;
  aspect-ratio: 3 / 2;
  background-color: var(--tds-text);
  -webkit-mask: url("/ronova-wordmark-20261008.png") center / contain no-repeat;
  mask: url("/ronova-wordmark-20261008.png") center / contain no-repeat;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-brand__tag {
  color: var(--tds-text-muted);
  font-size: var(--tds-type-meta);
  letter-spacing: 0.04em;
  text-transform: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav {
  flex: 1 1 auto;
  min-width: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav__list {
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1.4vw, 1.4rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav__link {
  position: relative;
  padding: 0.6rem 0.15rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--tds-text);
  font-size: var(--tds-type-small);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0.25rem;
  height: 2px;
  background: var(--seam);
  border-radius: 2px 1px 3px 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--vessel-settle);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav__link:hover::after {
  transform: scaleX(1);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__controls {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: var(--tds-space-1);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action {
  min-height: 2.5rem;
  padding-inline: var(--tds-space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px 5px 2px 4px;
  color: var(--tds-text);
  font-size: var(--tds-type-small);
  letter-spacing: 0;
  white-space: nowrap;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--renkan-id,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--menu {
  border-color: var(--tds-border-strong);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--support {
  color: var(--seam-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__locale-chip {
  color: var(--tds-text-muted);
  font-size: var(--tds-type-meta);
}

@media (max-width: 1320px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-brand__tag {
    display: none;
  }
}

@media (max-width: 1180px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-nav--desktop,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--access,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--support {
    display: none;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__inner {
    justify-content: space-between;
  }
}

@media (max-width: 620px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--renkan-id,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-brand__tag,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__locale-chip {
    display: none;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--menu,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-header__action--preferences {
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
  }
}

/* Controls -------------------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .button {
  min-height: 2.75rem;
  padding: 0.55rem 1.25rem;
  background: transparent;
  border: 1px solid var(--tds-border-strong);
  border-radius: 3px 5px 2px 6px / 5px 2px 6px 3px;
  box-shadow: none;
  color: var(--tds-text);
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 900ms var(--vessel-settle), color 900ms var(--vessel-settle), scale 2s ease;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .button--primary {
  background: var(--tds-text);
  border-color: var(--tds-text);
  color: var(--tds-bg);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .button--primary :is(span, .link-mark) {
  color: inherit;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .button--ghost:hover {
  background: color-mix(in srgb, var(--seam) 14%, transparent);
  color: var(--tds-text);
}

@media (any-hover: hover) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], input:not([type="hidden"]), select, textarea):not(:disabled) {
    transition-property: scale, background-color, color, border-color;
    transition-duration: 2s, 900ms, 900ms, 900ms;
    transition-timing-function: ease;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], input:not([type="hidden"]), select, textarea):not(:disabled):not([hidden]):not([aria-disabled="true"]):hover {
    transform-origin: center;
    scale: 1.03;
    transition: scale 1s ease, background-color 900ms ease, color 900ms ease, border-color 900ms ease;
  }

  html[data-preference-motion="reduce"] body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], input, select, textarea):hover {
    scale: 1;
  }
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--tds-text-muted);
  font-size: var(--tds-type-meta);
  letter-spacing: 0.08em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .status-pill::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4em;
  height: 0.62em;
  background: var(--seam);
  border-radius: 40% 60% 55% 45%;
  transform: rotate(16deg);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.form-field input, .form-field textarea, .form-field select) {
  background: color-mix(in srgb, var(--tds-bg) 70%, transparent);
  border: 1px solid var(--tds-border-strong);
  border-radius: 3px 4px 2px 5px;
  color: var(--tds-text);
}

/* Slabs ----------------------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .glass-panel {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background-color: var(--tds-surface-raised);
  background-image: var(--vessel-crazing);
  background-size: 640px 640px;
  backdrop-filter: none;
  border: 0;
  border-radius: 5px 9px 4px 11px / 9px 4px 11px 5px;
  box-shadow: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .glass-panel::before {
  display: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .meta-row {
  padding-block: var(--tds-space-3);
  border-top: 1px solid var(--tds-border);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .meta-row span {
  color: var(--tds-text-muted);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .meta-row strong {
  color: var(--tds-text);
  font-weight: 400;
  text-align: left;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .prose :is(p, li) {
  max-width: var(--vessel-measure);
  line-height: var(--tds-leading-body);
}

html:is([lang="ja"], [lang="zh-Hant"]) body[data-shell-identity="vessel"][data-tds-product="ronova"] .prose :is(p, li) {
  line-height: var(--tds-leading-cjk);
}

/* Motion settles every panel; the old edge-band fade would fight it. */
html.js.reveal-ready body[data-shell-identity="vessel"][data-tds-product="ronova"] .fade-up,
html.js body[data-shell-identity="vessel"][data-tds-product="ronova"] .fade-up {
  opacity: 1;
  filter: none;
  transform: none;
  will-change: auto;
  transition: none;
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] [data-fx] {
  opacity: calc(0.05 + 0.95 * var(--e, 1));
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.glass-panel, .section-heading, .page-hero)[data-fx] {
  transform: translateY(calc((1 - var(--e, 1)) * 1.4rem));
}

html.vessel-motion.js.reveal-ready body[data-shell-identity="vessel"][data-tds-product="ronova"] .fade-up[data-fx] {
  opacity: calc(0.05 + 0.95 * var(--e, 1));
  transform: translateY(calc((1 - var(--e, 1)) * 1.4rem));
}

html.vessel-motion.js.reveal-ready body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.project-card, .info-card, .community-choice).fade-up[data-fx],
html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.project-card, .info-card, .community-choice)[data-fx] {
  transform:
    translate(calc(var(--sx, 0px) * (1 - var(--e, 1))), calc(var(--sy, 0px) * (1 - var(--e, 1))))
    rotate(calc(var(--sr, 0deg) * (1 - var(--e, 1))));
}

/* Shards: entries cut unevenly from the same glaze ---------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.project-card, .info-card, .community-choice) {
  --shard: polygon(0.8% 2.6%, 7% 0.5%, 44% 1.8%, 98.6% 0, 100% 9%, 99.2% 57%, 99.8% 96%, 92% 99.6%, 41% 98.4%, 1.2% 100%, 0 88%, 1% 36%);
  clip-path: var(--shard);
  border-radius: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.project-card, .info-card):nth-of-type(3n + 2),
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-list > :nth-child(3n + 2) .project-card {
  --shard: polygon(0 1%, 58% 0.4%, 96% 2.4%, 100% 0.6%, 99% 44%, 100% 91%, 97.5% 99.8%, 60% 98.6%, 6% 100%, 0.6% 97%, 1.2% 52%);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.project-card, .info-card):nth-of-type(3n),
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-list > :nth-child(3n) .project-card {
  --shard: polygon(2.4% 0, 39% 1.6%, 91% 0.2%, 99.8% 3%, 99% 62%, 100% 98%, 70% 99.4%, 11% 98.4%, 0.4% 100%, 1% 66%, 0 11%);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-card h3 {
  font-size: clamp(1.45rem, 2.2vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-card p {
  color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-card__head {
  gap: var(--tds-space-3);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-card .button {
  position: relative;
  z-index: 1;
  width: auto;
  min-height: 2.75rem;
  align-self: flex-start;
  justify-content: center;
  padding: 0.5rem 1.15rem;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-card--with-background::after {
  opacity: 0.09;
  background-color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .project-list {
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
}

/* The sights: one vessel per page, off-grid against empty ground --------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight {
  position: absolute;
  top: calc(var(--tds-shell-header-height) + clamp(1.5rem, 5vw, 4.5rem));
  right: var(--vessel-edge);
  z-index: 0;
  width: clamp(14rem, 31vw, 29rem);
  pointer-events: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--projects {
  width: clamp(18rem, 42vw, 40rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--contact,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--privacy,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--security,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--project {
  width: clamp(12rem, 25vw, 23rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .page-hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 7.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

@media (min-width: 900px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .page-hero {
    min-height: clamp(20rem, 34vw, 32rem);
    padding-right: clamp(14rem, 33vw, 31rem);
  }
}

@media (max-width: 899px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: min(56vw, 15rem);
    margin: var(--tds-space-8) var(--tds-page-gutter) 0 auto;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight--projects {
    width: min(80vw, 22rem);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .page-hero {
    padding-top: var(--tds-space-6);
  }
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-sight[data-fx] {
  opacity: calc(0.1 + 0.9 * var(--e, 1));
  transform: translateY(calc((1 - var(--e, 1)) * 0.9rem));
}

.v-clay { fill: var(--v-clay); }
.v-glaze { fill: var(--v-glaze); }
.v-glaze--stone { fill: var(--v-glaze-stone); }
.v-inside { fill: var(--v-inside); }
.v-inside--foot { fill: var(--v-clay); }
.v-foot { fill: var(--v-clay); opacity: 0.8; }
.v-well { fill: var(--v-inside); }
.v-speckle { fill: var(--v-speck); opacity: 0.62; }
.v-ground { fill: var(--v-ground); }
.v-lip { fill: none; stroke: var(--v-lip); stroke-width: 1.4; }
.v-shade-0 { stop-color: var(--v-shade-0); }
.v-shade-1 { stop-color: var(--v-shade-1); }
.v-shade-2 { stop-color: var(--v-shade-2); }
.v-shelf { fill: none; stroke: var(--v-line); stroke-width: 1.1; }
.v-oxide { fill: var(--v-clay); }
.v-oxide--water { fill: none; stroke: var(--v-clay); stroke-width: 1.3; stroke-linecap: round; }
.v-tile--back .v-clay { opacity: 0.45; }
.v-drop { fill: var(--seam); }
.v-mark { fill: none; stroke: var(--v-inside); stroke-width: 1.6; }
.v-construction { fill: none; stroke: var(--v-line); stroke-width: 0.9; stroke-dasharray: 3 5; }
.v-construction .v-point { fill: var(--seam); stroke: none; }
.v-rings { fill: none; stroke: var(--v-speck); stroke-width: 1; opacity: 0.7; }
.v-cord { fill: none; stroke: var(--oxide); stroke-width: 1.7; stroke-linecap: round; }
.v-knot { fill: var(--oxide); }

.v-crack {
  fill: none;
  stroke: var(--v-crack);
  stroke-width: 1;
  stroke-linecap: round;
}

.v-seam {
  fill: none;
  stroke: var(--v-seam);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--e, 1));
}

/* Home: the name, the portrait, and empty bone --------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
  row-gap: 0;
  align-items: start;
  width: var(--shell);
  min-height: min(58rem, calc(100svh + 6rem));
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  --hp: 1;
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero {
  --hp: 0.16;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cracks {
  position: absolute;
  top: -42%;
  left: -62%;
  z-index: -1;
  width: 200%;
  height: 200%;
  overflow: visible;
  pointer-events: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cracks .v-crack {
  stroke: var(--tds-rule-strong);
  stroke-width: 0.8;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cracks .v-seam {
  stroke: var(--seam);
  stroke-width: 2;
  stroke-dashoffset: calc(1 - var(--hp, 1));
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cracks .v-crack {
  animation: vessel-crack-open 2.2s var(--vessel-settle) both;
}

@keyframes vessel-crack-open {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__main {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 8;
  grid-row: 1;
  max-width: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero h1 {
  margin: 0 0 clamp(1.25rem, 3vw, 2.25rem) -0.04em;
  max-width: min-content;
  color: var(--tds-text);
  font-size: clamp(4rem, 13.6vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
}

html:is([lang="ja"], [lang="zh-Hant"]) body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.hero h1, .page-hero h1, .vessel-assembly__copy h2) {
  letter-spacing: -0.01em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__lede {
  margin: 0 0 var(--tds-space-3);
  max-width: 30ch;
  color: var(--tds-text);
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.32;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__secondary {
  margin: 0;
  max-width: 40ch;
  color: var(--tds-text-muted);
  font-size: var(--tds-type-body);
  line-height: 1.7;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tds-space-3);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__actions .button {
  flex: 0 0 auto;
  width: auto;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__portrait {
  position: relative;
  z-index: 1;
  grid-column: 8 / -1;
  grid-row: 1 / span 3;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 34rem;
  margin: clamp(3rem, 10vw, 9rem) calc(var(--vessel-edge) * -0.55) 0 0;
  aspect-ratio: 3 / 4;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 52%;
  border-radius: 0;
  clip-path: polygon(2% 1%, 34% 0, 71% 2%, 99% 0.4%, 100% 34%, 98.6% 78%, 100% 99%, 62% 100%, 18% 98.6%, 0 100%, 1.4% 62%, 0 22%);
  filter: saturate(0.82) sepia(0.05);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"][data-tds-mode="night"] .hero__portrait img {
  filter: saturate(0.76) brightness(0.9);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 6;
  grid-row: 2;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: 0;
  background: none;
  border: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv__entry {
  display: grid;
  grid-template-columns: minmax(7.5rem, 11.5rem) minmax(0, 1fr);
  gap: var(--tds-space-4);
  padding-block: var(--tds-space-3);
  border-top: 1px solid var(--tds-border);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv__period {
  color: var(--seam-text);
  font-size: var(--tds-type-small);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv__title {
  color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv__more {
  display: inline-block;
  margin-top: var(--tds-space-4);
  color: var(--tds-text);
  font-size: var(--tds-type-small);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__aside {
  position: relative;
  z-index: 2;
  grid-column: 1 / span 6;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-marginalia {
  padding: 0;
  font-size: var(--tds-type-small);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-marginalia .meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  padding-block: var(--tds-space-2);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .identity-line {
  margin: 0;
  padding: 0;
  color: var(--tds-text-muted);
  line-height: 1.7;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .identity-line strong {
  color: inherit;
  font-weight: 400;
}

@media (max-width: 899px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: var(--tds-space-8);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero h1 {
    font-size: clamp(4rem, 21vw, 8rem);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__portrait {
    align-self: flex-end;
    width: min(74vw, 24rem);
    margin: var(--tds-space-8) calc(var(--tds-page-gutter) * -1) 0 0;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero-cv,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__aside {
    width: 100%;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .hero__aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home: the assembly, a pinned scene where nine shards come together as one bowl ----------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly {
  --p: 1;
  position: relative;
  z-index: 1;
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly {
  --p: 0;
  height: 240svh;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  overflow: clip;
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__copy {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__copy h2 {
  margin: 0 0 var(--tds-space-4);
  max-width: 11ch;
  font-size: clamp(2.2rem, 4.8vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__copy p:last-child {
  max-width: 34ch;
  color: var(--tds-text-muted);
  line-height: 1.7;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__art {
  position: absolute;
  top: 50%;
  right: max(-13vw, -12rem);
  z-index: 1;
  width: min(68vw, 60rem);
  height: auto;
  overflow: visible;
  transform: translateY(-50%);
}

@media (max-width: 899px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__stage {
    align-content: start;
    padding-top: clamp(5rem, 14svh, 8rem);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-assembly__art {
    top: auto;
    right: -16vw;
    bottom: 5svh;
    width: 124vw;
    transform: none;
  }
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .shard {
  transform-box: fill-box;
  transform-origin: center;
  transform:
    translate(calc(var(--dx) * (1 - var(--p, 1))), calc(var(--dy) * (1 - var(--p, 1))))
    rotate(calc(var(--dr) * (1 - var(--p, 1))));
}

.v-seam--assembly {
  stroke-width: 2.6;
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 1) - 0.84) * 6.25, 1));
}

/* Home: the shards themselves, an uneven wall of entries ------------------------------------ */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.25rem);
  padding-top: clamp(2rem, 6vw, 5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card {
  grid-column: span 4;
  margin: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n + 1) {
  grid-column: 1 / span 5;
  margin-top: clamp(0rem, 3vw, 2.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n + 2) {
  grid-column: 6 / span 4;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n + 3) {
  grid-column: 10 / span 3;
  margin-top: clamp(0rem, 5vw, 4.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n + 4) {
  grid-column: 2 / span 3;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n + 5) {
  grid-column: 5 / span 4;
  margin-top: clamp(0rem, 3vw, 2.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(6n) {
  grid-column: 9 / span 4;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .section-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  margin-top: var(--tds-space-6);
}

@media (max-width: 1099px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(n) {
    grid-column: span 6;
    margin-top: 0;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(3n) {
    grid-column: 3 / span 10;
  }
}

@media (max-width: 680px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(n) {
    grid-column: 1 / -1;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(even) {
    margin-left: var(--tds-space-4);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-shards .project-card:nth-of-type(odd) {
    margin-right: var(--tds-space-4);
  }
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .section-heading {
  align-items: end;
  border: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .section-heading p:not(.eyebrow) {
  color: var(--tds-text-muted);
}

/* The CV is the seam itself: dates sit on it ------------------------------------------------ */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] #cv-list,
html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-list {
  --seam-lane: clamp(9rem, 19vw, 15rem);
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--seam-lane) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 2rem);
  background: none;
  border: 0;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry__period {
  margin: 0;
  color: var(--seam-text);
  font-size: var(--tds-type-small);
  text-align: right;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry h2 {
  margin: 0;
  max-width: 28ch;
  color: var(--tds-text);
  font-size: clamp(1.3rem, 2.8vw, 2.25rem);
  line-height: 1.22;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry--ongoing h2 {
  color: var(--oxide);
}

@media (max-width: 620px) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] #cv-list,
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-list {
    --seam-lane: 0.25rem;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry {
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--tds-space-6);
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] .cv-entry__period {
    text-align: left;
    margin-bottom: var(--tds-space-1);
  }
}

/* The seam ---------------------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam svg {
  position: absolute;
  left: 0;
  display: block;
  overflow: visible;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam path {
  fill: var(--seam);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam__stretch {
  clip-path: inset(0 0 calc((1 - var(--sp, 1)) * 100%) 0);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam__branch--right {
  clip-path: inset(0 calc((1 - var(--sp, 1)) * 100%) 0 0);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .vessel-seam__branch--left {
  clip-path: inset(0 0 0 calc((1 - var(--sp, 1)) * 100%));
}

/* Footer: the seam closes -------------------------------------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer {
  margin-top: clamp(4rem, 10vw, 9rem);
  background: none;
  border-top: 1px solid var(--tds-border);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__inner {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__top {
  display: block;
  position: relative;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__enso {
  --e: 1;
  width: clamp(6.5rem, 12vw, 10rem);
  margin-bottom: var(--tds-space-6);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__enso-mark {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--seam);
  -webkit-mask-image: conic-gradient(from 22deg, #000 calc(var(--e, 1) * 360deg), transparent 0);
  mask-image: conic-gradient(from 22deg, #000 calc(var(--e, 1) * 360deg), transparent 0);
}

html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__enso[data-fx] {
  opacity: 1;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__title {
  color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.site-footer__caption, .site-footer__meta) {
  color: var(--tds-text-muted);
  font-size: var(--tds-type-meta);
  letter-spacing: 0.08em;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__links a {
  color: var(--tds-text);
  font-size: var(--tds-type-small);
  text-decoration: none;
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-footer__locale-picker {
  background: none;
  border: 0;
}

/* First visit: one quiet line, never over the page ------------------------------------------- */

.site-preferences-note {
  position: fixed;
  right: max(var(--tds-page-gutter, 1rem), env(safe-area-inset-right));
  bottom: max(var(--tds-space-4, 1rem), env(safe-area-inset-bottom));
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  max-width: calc(100vw - 2rem);
  background: var(--tds-surface-raised, #eee6d6);
  border: 1px solid var(--tds-border-strong, rgba(52, 47, 42, 0.34));
  border-radius: 3px 5px 2px 4px;
  color: var(--tds-text, #342f2a);
  font-size: var(--tds-type-meta, 0.78rem);
}

.site-preferences-note[hidden] {
  display: none;
}

.site-preferences-note__open,
.site-preferences-note__dismiss {
  min-height: 2rem;
  padding: 0.3rem 0.65rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.site-preferences-note__dismiss {
  min-width: 2rem;
  padding-inline: 0.4rem;
  border-left: 1px solid var(--tds-border, rgba(52, 47, 42, 0.15));
  color: var(--tds-text-muted, #5f574e);
}

/* Preferences panel and drawer follow the same glaze ----------------------------------------- */

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-preferences {
  background: var(--tds-surface-raised);
  border: 1px solid var(--tds-border-strong);
  border-radius: 5px 9px 4px 11px / 9px 4px 11px 5px;
  color: var(--tds-text);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"] .site-drawer {
  background-color: var(--tds-bg);
  background-image: var(--vessel-grain);
  background-size: 900px 900px;
  color: var(--tds-text);
}

/* Portal: the same glaze, its door kept ------------------------------------------------------ */

html body[data-shell-identity="vessel"][data-tds-product="ronova"].portal-page {
  background-image: var(--vessel-grain);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"].portal-page .portal-masthead {
  background: none;
  border-bottom: 1px solid var(--tds-border);
}

html body[data-shell-identity="vessel"][data-tds-product="ronova"].portal-page :is(.portal-trust-card, .portal-state-panel, .portal-launcher) {
  background-color: var(--tds-surface-raised);
  background-image: var(--vessel-crazing);
  border: 0;
  border-radius: 5px 9px 4px 11px / 9px 4px 11px 5px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] * {
    animation: none !important;
    transition: none !important;
  }

  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], input, select, textarea):hover {
    scale: 1 !important;
  }
}

@media print {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(.vessel-seam, .vessel-sight, .hero-cracks, .site-preferences-note) {
    display: none !important;
  }
}

/* The shared base rule's :not() chain outranks the vessel selectors above, and it grows controls in
   --tds-duration-standard (0.18 s). The contract is 103% over 1 s and back over 2 s; the extra :not(#vessel)
   lifts these two rules above it without !important. */
@media (any-hover: hover) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [data-interactive]):not(:disabled):not(#vessel) {
    transition-property: scale, background-color, color, border-color;
    transition-duration: 2s, 900ms, 900ms, 900ms;
    transition-timing-function: ease;
  }
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [data-interactive]):not(:disabled):not(#vessel):hover {
    transition: scale 1s ease, background-color 900ms ease, color 900ms ease, border-color 900ms ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body[data-shell-identity="vessel"][data-tds-product="ronova"] :is(a[href], button, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [data-interactive]):not(#vessel) { transition: none; scale: none; }
}

/* Independent visual review (63fcd9b5f85940a7): text-bearing sections never fade. They still settle into place
   with the scroll; only the decorative vessels fade. */
html.vessel-motion body[data-shell-identity="vessel"][data-tds-product="ronova"] [data-fx]:not(.vessel-sight):not(#vessel),
html.vessel-motion.js.reveal-ready body[data-shell-identity="vessel"][data-tds-product="ronova"] .fade-up[data-fx]:not(.vessel-sight):not(#vessel) {
  opacity: 1;
}