/* ==========================================================================
   anthonychiaravalloti.com
   Committed single-theme design. Deep warm ink ground, bone type.
   No hue accent anywhere: hierarchy is weight, scale and opacity only.
   The photography is the only colour on the finished page.
   ========================================================================== */

:root {
  --ground:      #131110;
  --ground-deep: #0C0A09;
  --ground-lift: #1A1715;
  --bone:        #EDE6DA;
  --bone-mid:    #A2988A;
  --bone-low:    #6B6258;
  --rule:        #2B2521;
  --rule-soft:   #201C19;

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --label-col: clamp(120px, 14vw, 190px);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }

::selection { background: var(--bone); color: var(--ground); }

:focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bone);
  color: var(--ground);
  padding: 10px 16px;
  font-size: 13px;
}
.skip:focus { left: 8px; top: 8px; }

/* --- film grain, very low, gives the flat ground some texture ----------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- shared type -------------------------------------------------------- */
.label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-low);
}

.prose {
  max-width: 58ch;
  color: var(--bone-mid);
  font-size: 16.5px;
  line-height: 1.72;
}
.prose p + p { margin-top: 1.15em; }
.prose strong { color: var(--bone); font-weight: 500; }

.todo { font-style: italic; color: var(--bone-low); }

/* --- fixed corner marks ------------------------------------------------- */
.mark {
  position: fixed;
  z-index: 40;
  mix-blend-mode: difference;
  color: #fff;
}
.mark .label { color: inherit; }
.mark { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.mark.hide { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.mark-name { top: var(--gutter); left: var(--gutter); }
.mark-contact { top: var(--gutter); right: var(--gutter); }
.mark a { border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .3s var(--ease); }
.mark a:hover { border-bottom-color: currentColor; }
/* On phones the name mark scrolls away with the page, because it repeats
   the hero. Contact stays fixed at every width so the ask is never more
   than one tap away, wherever someone stops reading. */
@media (max-width: 700px) { .mark-name { position: absolute; } }

/* --- scroll cue --------------------------------------------------------
   A hairline with a light travelling down it, and a chevron under it.
   It sits in the right margin, on the same axis as the Contact mark,
   so it never crosses the left-aligned type. No circle, no word, no bounce.
   ---------------------------------------------------------------------- */
.cue {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  pointer-events: none;
  color: var(--bone);
  opacity: .48;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  animation: cue-in 1s 1.15s var(--ease) backwards;
}
.cue-track {
  position: relative;
  width: 1px;
  height: 38px;
  overflow: hidden;
  background: rgba(237, 230, 218, .16);
}
.cue-track::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 13px;
  background: currentColor;
  animation: cue-travel 2.7s var(--ease) infinite;
}
.cue-arrow { opacity: .6; }
.cue.gone { opacity: 0; transform: translateY(10px); }
@keyframes cue-travel {
  0%   { transform: translateY(-14px); opacity: 0; }
  20%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translateY(38px); opacity: 0; }
}
@keyframes cue-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: .48; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .cue { animation: none; }
  .cue-track::after { animation: none; transform: translateY(12px); }
}

/* --- section shell ------------------------------------------------------ */
.band {
  padding-inline: var(--gutter);
  padding-block: clamp(72px, 11vw, 150px);
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  border-top: 1px solid var(--rule-soft);
}
@media (max-width: 760px) {
  .band { grid-template-columns: 1fr; gap: 22px; }
}
.idx { position: sticky; top: calc(var(--gutter) + 34px); }
.idx .label { display: block; }
.idx .label + .label { margin-top: 6px; }
@media (max-width: 760px) { .idx { position: static; } }

/* --- reveal on scroll (visible by default, JS opts in) ------------------ */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* --- 01 opening --------------------------------------------------------- */
/* No photography anywhere on this page, so the opening is type and light.
   The aura is a single warm bloom sitting where the portrait used to sit,
   tonal rather than a hue accent, and it drifts slowly enough that you
   register it as depth rather than as motion. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 86svh;
  padding-inline: var(--gutter);
  padding-block: clamp(112px, 17vh, 190px) clamp(48px, 7vw, 96px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.aura {
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -14%;
  width: min(78vw, 900px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(94, 74, 58, .30) 0%,
    rgba(62, 49, 39, .17) 34%,
    rgba(34, 28, 24, .07) 56%,
    rgba(19, 17, 16, 0) 74%
  );
  filter: blur(34px);
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: .82; }
  to   { transform: translate3d(-3.5%, 3%, 0) scale(1.07); opacity: 1; }
}
@media (max-width: 860px) {
  .hero { min-height: 78svh; }
  .aura { top: -16%; right: -42%; width: min(130vw, 620px); opacity: .72; }
}
/* On a phone the name is small enough that baseline-anchoring it leaves a
   void above rather than composed negative space. Centre it, shorten the
   first screen, and let the next section show an edge. */
@media (max-width: 700px) {
  .hero {
    min-height: 68svh;
    align-items: center;
    padding-block: 104px 56px;
  }
}
.hero-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 12.8vw, 178px);
  line-height: .86;
  letter-spacing: -.035em;
  margin-bottom: clamp(22px, 3.4vw, 46px);
  animation: settle 1.1s var(--ease) both;
}
.hero-name em { font-style: italic; font-weight: 400; }
@keyframes settle {
  from { opacity: 0; letter-spacing: .04em; }
  to   { opacity: 1; letter-spacing: -.035em; }
}
.hero-sub { display: flex; flex-wrap: wrap; gap: 8px 26px; animation: fade 1.1s .25s ease both; }
.hero-sub span { font-size: 14px; color: var(--bone-mid); }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .hero-name, .hero-sub { animation: none; }
  .aura { animation: none; opacity: .9; }
}


/* --- 02 position -------------------------------------------------------- */
.statement {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(27px, 4.6vw, 62px);
  line-height: 1.14;
  letter-spacing: -.022em;
  max-width: 19ch;
  text-wrap: balance;
}
.statement em { font-style: italic; }
.statement-sub {
  margin-top: clamp(26px, 3.5vw, 46px);
  font-size: 15px;
  color: var(--bone-mid);
  max-width: 42ch;
}

/* --- 03 story ----------------------------------------------------------- */
.story { display: flex; flex-direction: column; gap: clamp(34px, 5vw, 64px); }
.pull {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -.018em;
  max-width: 20ch;
  padding-left: clamp(16px, 2.4vw, 34px);
  border-left: 1px solid var(--rule);
}

/* --- 04 pillars --------------------------------------------------------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-soft); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }
.pillar { background: var(--ground); padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.2vw, 30px); }
.pillar .n {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1;
  color: var(--bone-low);
  display: block;
  margin-bottom: 18px;
}
.pillar h2 { font-size: 17px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 8px; }
.pillar p { font-size: 14.5px; color: var(--bone-mid); line-height: 1.6; }

/* --- 05 transition ------------------------------------------------------ */
.transition {
  padding-inline: var(--gutter);
  padding-block: clamp(60px, 9vw, 120px) clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--rule-soft);
}
.transition p {
  font-family: var(--display);
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.16;
  letter-spacing: -.02em;
  margin-top: 18px;
  max-width: 18ch;
}

/* --- 06 timeline -------------------------------------------------------- */
#tl { position: relative; background: var(--ground-deep); }
#pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 60px);
  padding-inline: var(--gutter);
  padding-block: 80px 72px;
}
@media (max-width: 820px) {
  #pin { grid-template-columns: 1fr; align-content: center; gap: 18px; padding-block: 92px 84px; }
}

.dial-ghost { font-family: var(--display); font-size: 13px; letter-spacing: .2em; color: var(--bone-low); height: 18px; }
#tl-year {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(74px, 14.5vw, 186px);
  line-height: .9;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
  margin-block: 6px;
}
#tl-year.flip { animation: flip .42s var(--ease); }
@keyframes flip {
  from { opacity: .25; transform: translateY(14px); }
  to   { opacity: 1;  transform: translateY(0); }
}
.dial-meta { display: flex; gap: 22px; margin-top: 14px; }

#tl-entries { display: flex; flex-direction: column; min-height: 210px; justify-content: center; }
@media (max-width: 820px) { #tl-entries { min-height: 168px; } }

.entry {
  border-top: 1px solid var(--rule);
  padding-block: clamp(12px, 1.6vw, 18px);
  display: flex;
  align-items: baseline;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry .org { font-size: clamp(17px, 2vw, 23px); font-weight: 500; letter-spacing: -.015em; }
.entry .role { font-size: 13px; color: var(--bone-mid); text-align: right; flex: 1 1 180px; }
@media (max-width: 560px) {
  .entry { flex-direction: column; align-items: flex-start; gap: 4px; }
  .entry .role { text-align: left; flex: 0 0 auto; }
}


#tl-rail { position: absolute; right: calc(var(--gutter) / 2); top: 16%; bottom: 16%; width: 1px; background: var(--rule); }
@media (max-width: 560px) { #tl-rail { display: none; } }
#tl-thumb { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: var(--bone); display: block; }

.tl-foot {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(24px, 4vw, 40px);
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.noscript-tl { padding: var(--gutter); color: var(--bone-mid); max-width: 60ch; }

/* --- 07 ventures -------------------------------------------------------- */
.ventures { display: flex; flex-direction: column; }
.venture {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--rule);
  transition: opacity .3s var(--ease);
}
.venture:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 700px) { .venture { grid-template-columns: 1fr; gap: 8px; } }
.venture h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(23px, 3vw, 36px);
  letter-spacing: -.02em;
  line-height: 1.06;
}
.venture p { font-size: 15px; color: var(--bone-mid); line-height: 1.6; }
.venture .go { font-size: 16px; color: var(--bone-low); transition: transform .3s var(--ease), color .3s var(--ease); }
@media (hover: hover) {
  .ventures:hover .venture { opacity: .42; }
  .ventures .venture:hover { opacity: 1; }
}
.venture:hover .go, .venture:focus-visible .go { color: var(--bone); transform: translateX(4px); }

/* --- 08 the show -------------------------------------------------------- */
.pod-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.pod-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -.025em;
  max-width: 16ch;
}
/* Three guests, named. The name is the credential, so it leads and the rest
   sits under it quietly. Each card is the whole link. */
.eps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  margin-top: clamp(28px, 4vw, 52px);
}
@media (max-width: 760px) { .eps { grid-template-columns: 1fr; } }
.ep {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 9px;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--rule);
  transition: opacity .3s var(--ease);
}
.ep h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.ep-who {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-low);
  min-height: 1.4em;
}
.ep-on { font-size: 15px; color: var(--bone-mid); line-height: 1.6; }
.ep .go {
  font-size: 16px;
  color: var(--bone-low);
  margin-top: 4px;
  transition: transform .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) {
  .eps:hover .ep { opacity: .42; }
  .eps .ep:hover { opacity: 1; }
}
.ep:hover .go, .ep:focus-visible .go { color: var(--bone); transform: translateX(4px); }

.listen { display: flex; gap: 22px; margin-top: clamp(20px, 2.6vw, 32px); flex-wrap: wrap; }
.listen a {
  font-size: 13.5px;
  color: var(--bone-mid);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.listen a:hover { color: var(--bone); border-bottom-color: var(--bone); }

/* --- 09 partners -------------------------------------------------------- */
/* Static and legible. The drifting marquee that used to live here moved
   faster than anyone could read and proved nothing. */
.partners-intro {
  font-size: 15px;
  color: var(--bone-mid);
  margin-bottom: clamp(22px, 3vw, 36px);
  max-width: 40ch;
}
.partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 5vw, 72px);
}
@media (max-width: 620px) { .partners { grid-template-columns: 1fr; } }
.partners li {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.15;
  padding-block: clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--rule-soft);
}

/* --- 10 close ----------------------------------------------------------- */
.close {
  padding-inline: var(--gutter);
  padding-block: clamp(90px, 14vw, 170px) clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--rule-soft);
}
.close-line {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 82px);
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: clamp(40px, 6vw, 76px);
  max-width: 15ch;
}
.close-line em { font-style: italic; }
.close-rows {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.close-mail { font-size: clamp(17px, 2.4vw, 26px); color: var(--bone); }
.close-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.close-nav a { font-size: 14px; color: var(--bone-mid); transition: color .3s var(--ease); }
.close-nav a:hover { color: var(--bone); }
.colophon { margin-top: clamp(36px, 6vw, 64px); }

/* --- 11 contact sheet ---------------------------------------------------
   A takeover, not a floating box. The page recedes and the ground fills
   the viewport, so the form reads as part of the site rather than as a
   widget dropped on top of it. No card, no shadow, no circular close.
   ---------------------------------------------------------------------- */
.close-contact {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 2.4vw, 26px);
  letter-spacing: -.01em;
  color: var(--bone);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color .3s var(--ease);
}
.close-contact:hover { border-bottom-color: var(--bone); }
.close-noscript { margin-top: 26px; font-size: 14px; color: var(--bone-mid); }
.close-noscript a { color: var(--bone); border-bottom: 1px solid var(--rule); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ground);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sheet-in .42s var(--ease) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }

.sheet-inner {
  min-height: 100%;
  padding-inline: var(--gutter);
  padding-block: clamp(24px, 4vh, 44px) clamp(48px, 8vh, 96px);
  display: flex;
  flex-direction: column;
}
.sheet-top { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-close {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--bone-mid); transition: color .3s var(--ease);
}
.sheet-close:hover { color: var(--bone); }
.sheet-body {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 760px;
  width: 100%;
  margin-top: clamp(40px, 8vh, 90px);
}
.sheet-step { width: 100%; }

/* step one: the choice, as type. No select, no radio buttons. */
.paths { display: flex; flex-direction: column; }
.path {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px clamp(16px, 4vw, 40px);
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: clamp(22px, 3vw, 32px) 0;
  cursor: pointer;
  color: inherit;
  transition: opacity .3s var(--ease);
}
.path:last-child { border-bottom: 1px solid var(--rule); }
.path h2 {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 46px);
  letter-spacing: -.025em;
  line-height: 1.04;
}
.path p { grid-column: 1; grid-row: 2; font-size: 15px; color: var(--bone-mid); line-height: 1.6; max-width: 46ch; }
.path .go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 17px;
  color: var(--bone-low);
  transition: transform .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) {
  .paths:hover .path { opacity: .42; }
  .paths .path:hover { opacity: 1; }
}
.path:hover .go, .path:focus-visible .go { color: var(--bone); transform: translateX(4px); }

/* step two: three fields, underlines only */
.sheet-crumb { display: flex; gap: 20px; align-items: baseline; margin-bottom: clamp(28px, 4vw, 44px); }
.sheet-back { background: none; border: 0; padding: 0; cursor: pointer; color: var(--bone-mid); transition: color .3s var(--ease); }
.sheet-back:hover { color: var(--bone); }
.sheet-path { color: var(--bone-low); }

.field { display: flex; flex-direction: column; gap: 9px; margin-bottom: clamp(22px, 3vw, 32px); }
.field label { color: var(--bone-low); }
.field input, .field textarea {
  font-family: var(--sans);
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--bone);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0 0 10px;
  width: 100%;
  resize: none;
  transition: border-color .3s var(--ease);
}
.field textarea { line-height: 1.55; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--bone); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.field.bad input, .field.bad textarea { border-bottom-color: var(--bone-mid); }

.send {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(21px, 2.8vw, 30px);
  letter-spacing: -.02em;
  color: var(--bone);
  background: none;
  border: 0;
  padding: 0;
  margin-top: clamp(8px, 1.6vw, 16px);
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.send:hover { border-bottom-color: var(--bone); }
.send[disabled] { opacity: .4; cursor: default; }
.sheet-note { margin-top: 20px; font-size: 14px; color: var(--bone-mid); line-height: 1.6; }
.sheet-note a { color: var(--bone); border-bottom: 1px solid var(--rule); }
.sheet-note:empty { display: none; }

/* the honeypot is for robots, so it must not be reachable or visible */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sheet-done {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: -.028em;
  line-height: 1.06;
  max-width: 18ch;
}