/* Closing scene shares its scroll-linked ground with the preceding letter. */
#definition.def-grand {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(120px, 15svh, 180px) 6vw clamp(84px, 12svh, 144px);
  z-index:21;
  background:#000;
  color:#f5f5f5;
  overflow: clip;
}
/* T25 (owner, 15 Oct): the definition is what the page ends on, so it is the largest thing; "Candor" is the small headword,
   with the orb before it, as a dictionary entry reads. */
.def-grand__entry {width:min(100%,1180px);margin-inline:auto}
.def-grand__head {display:flex;align-items:center;gap:clamp(10px,.8vw,14px)}
.def-grand__orb {--source-orb-size:30px}
.def-grand__word {
  margin:0;
  font:400 clamp(20px,1.8vw,30px)/1.25 var(--serif,"Iowan Old Style",Baskerville,serif);   /* the same size as "yours / only yours" (owner, 15 Oct) */
  letter-spacing:-.03em;
  white-space:nowrap;
}
.def-grand__details {
  margin:clamp(40px,6svh,72px) 0 0;
  display:flex;flex-direction:column;gap:clamp(36px,5svh,60px);
}
.def-grand__label {
  margin:0 0 clamp(12px,1.4svh,18px);
  font:400 15px/1.3 var(--sans,Helvetica,sans-serif);
  letter-spacing:.005em;
  color:#a0a0a0;
}
.def-grand__meaning {
  margin:0;
  font:300 clamp(42px,6.2vw,104px)/1.08 var(--sans,"Inter",Helvetica,sans-serif);   /* Inter Light (owner, 15 Oct) */
  letter-spacing:-.04em;
  color:inherit;
}
.def-grand__pronouns {
  margin:0;white-space:nowrap;
  font:400 italic clamp(20px,1.8vw,30px)/1.25 var(--serif,"Iowan Old Style",Baskerville,serif);
  letter-spacing:-.03em;
}
.def-grand__pronouns span {display:inline-block;margin-inline:.12em;color:#9a9ca2;font-style:normal;font-weight:400}
/* The viewport composition appears once the closing ground reaches black.
   Its fade is timed, so stopping the scroll never leaves content half revealed. */
.def-grand__stage{display:contents}
html[data-closing-ready] #definition{min-height:max(100svh,var(--closing-reserved-height,0px))}
html[data-closing-ready] .def-grand__stage{display:grid;align-items:center;opacity:0;pointer-events:none}
#definition[data-closing-stage=active] .def-grand__stage{position:fixed;inset:0;display:grid;grid-template-rows:minmax(min-content,1fr) auto;align-items:center;row-gap:32px;padding:clamp(96px,15svh,180px) 6vw 32px;overflow-y:auto;overscroll-behavior-y:auto;pointer-events:auto}
#definition[data-closing-stage=active] .def-grand__bottom{position:static;align-self:end;width:100%}
#definition[data-footer-reveal=entering] .def-grand__stage{animation:footer-stage-arrive 1500ms cubic-bezier(.25,.1,.25,1) both}
#definition[data-footer-reveal=visible] .def-grand__stage{opacity:1}
@keyframes footer-stage-arrive{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#definition .def-grand__stage{animation:none!important}}
@media(min-width:2000px){#definition.def-grand{padding-inline:8vw}}
@media(max-width:700px){
  #definition.def-grand{padding:140px 6vw 92px;min-height:100svh;min-height:100lvh}
  .def-grand__orb{--source-orb-size:26px}
  .def-grand__word{font-size:21px}
  .def-grand__details{margin-top:40px;gap:34px}
  .def-grand__label{font-size:13px;margin-bottom:10px}
  .def-grand__meaning{font-size:clamp(32px,9.8vw,44px);line-height:1.1}
  .def-grand__meaning br{display:none}
  .def-grand__pronouns{font-size:21px}
}
@media(max-width:359px){
  .def-grand__meaning{font-size:32px}
  .def-grand__pronouns{font-size:20px}
}

/* the orb, once it can speak (footer.js): a pointer, a focus ring, and a gentle swell while it talks */
.def-grand__orb[data-speaks]{cursor:pointer;border-radius:50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.def-grand__orb[data-speaks]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.def-grand__orb.is-speaking{transform:scale(1.12)}
@media(prefers-reduced-motion:reduce){.def-grand__orb[data-speaks]{transition:none}.def-grand__orb.is-speaking{transform:none}}

/* One viewport-wide plane crosses every adjacent section, including shadow
   backgrounds. The definition sits above it; no section owns a moving edge. */
html[data-closing-ready] #definition{background:transparent}
body::after{content:'';position:fixed;inset:0;z-index:20;background:#000;opacity:var(--closing-progress,0);pointer-events:none}
html[data-footer-tone],html[data-footer-tone] body{background:#fff}
.def-grand__bottom{--footer-utility-size:13px;position:absolute;left:var(--chrome-edge,6vw);right:var(--chrome-edge,6vw);bottom:32px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.def-grand__social{display:flex;align-items:center;gap:2px;justify-self:start;color:#a0a0a0}
.def-grand__social :is(a,.def-grand__social-icon){display:grid;place-items:center;width:32px;height:32px;color:inherit;border-radius:50%;background:transparent;transition:background .22s ease,color .22s ease}
.def-grand__social svg{width:18px;height:18px;fill:currentColor}
.def-grand__made{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font:400 var(--footer-utility-size,13px)/1.5 var(--sans);white-space:nowrap;color:#7c7c82}
.def-grand__made svg{width:13px;height:13px;fill:currentColor;stroke:none}
.def-grand__links{display:flex;flex-wrap:wrap;gap:2px;justify-content:flex-end;align-items:center;font-size:var(--footer-utility-size,13px);line-height:1.5;color:#a0a0a0}
.def-grand__links a{display:flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:999px;color:inherit;text-decoration:none;white-space:nowrap;background:transparent;transition:background .22s ease,color .22s ease}
.def-grand__social,.def-grand__links{padding:4px;border-radius:999px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.065);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.def-grand__links{justify-self:end}
@media(hover:hover){.def-grand__links a:hover,.def-grand__social :is(a,.def-grand__social-icon):hover{background:rgba(255,255,255,.085);color:#fff}}
.def-grand__links a:focus-visible,.def-grand__social a:focus-visible{outline:1px solid currentColor;outline-offset:-3px}
@media(max-width:700px){.def-grand__bottom{--footer-utility-size:11px;grid-template-columns:auto 1fr;gap:16px;bottom:28px}.def-grand__made{grid-column:1/-1;grid-row:2}.def-grand__links{gap:0}.def-grand__links a{padding-inline:6px}.def-grand__social :is(a,.def-grand__social-icon){width:28px}.def-grand__bottom{column-gap:12px}}

/* Spoken words remain semantic text; whole-word white fades use an aria-hidden layer. */
.def-grand__head{position:relative}
.def-grand__word,.def-grand__meaning{position:relative;color:rgb(65 65 69 / .6)}
.def-grand__spoken-word{position:relative;display:inline-block}
.def-grand__spoken{position:absolute;inset:0;color:#f5f5f5;pointer-events:none;opacity:var(--spoken-opacity,0)}
.def-grand__hint{position:absolute;left:var(--orb-hint-left,0px);top:-52px;width:160px;height:52px;opacity:0;pointer-events:none;color:#a0a0a0}
.def-grand__hint>span{position:absolute;top:1px;left:78px;font:400 15px/1.2 'Bradley Hand','Segoe Print',cursive;white-space:nowrap}
.def-grand__hint>svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.def-grand__head:has(.def-grand__orb[data-speaks]) .def-grand__hint{opacity:.8}
.def-grand__orb[data-speaks]{transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
@media(hover:hover){.def-grand__orb[data-speaks]:hover{transform:scale(1.07)}}
.def-grand__orb[data-speaks]:active{transform:scale(.97)}
.def-grand__orb[data-speaks].is-speaking{transform:scale(1.12)}
.def-grand__made svg{transform-origin:center;animation:footer-heartbeat 3800ms ease-in-out infinite;animation-play-state:paused}
#definition[data-closing-stage=active][data-footer-reveal=visible] .def-grand__made svg{animation-play-state:running}
#definition[data-page-hidden=true] .def-grand__made svg{animation-play-state:paused}
@keyframes footer-heartbeat{0%,12%,24%,100%{transform:scale(1)}6%,18%{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.def-grand__made svg{animation:none!important}.def-grand__orb[data-speaks]{transition:none!important;transform:none!important}}
@media(prefers-contrast:more){.def-grand__word,.def-grand__meaning{color:#f5f5f5}.def-grand__hint{color:#c6c6c6}}

@media(max-width:430px){.def-grand__bottom{grid-template-columns:1fr;justify-items:center;gap:12px}.def-grand__social,.def-grand__links{justify-self:center}.def-grand__links{grid-row:2}.def-grand__made{grid-column:1;grid-row:3}}
@media(prefers-reduced-motion:reduce){.def-grand__links a,.def-grand__social :is(a,.def-grand__social-icon){transition:none}}

/* The continuous water plane survives the content stage disappearing during
   reverse scroll, and blends away with the same veil all the way to white. */
#top>.def-grand__cursor-wake{opacity:var(--closing-progress,0)!important}

@media(max-width:700px){.def-grand__social,.def-grand__links{padding-inline:12px}}

/* One transparent native button covers the wordmark, orb, and touch margin. */
.def-grand__head{width:max-content;max-width:100%}
.def-grand__speak-target{position:absolute;inset:-12px -16px;z-index:4;border:0;border-radius:18px;background:transparent;color:inherit;cursor:pointer;padding:0;min-height:48px}
.def-grand__speak-target:focus-visible{outline:1px solid rgba(255,255,255,.55);outline-offset:3px}
@media(hover:hover){.def-grand__head:has(.def-grand__speak-target:hover) .def-grand__orb[data-speaks]{transform:scale(1.07)}}
.def-grand__head:has(.def-grand__speak-target:active) .def-grand__orb[data-speaks]{transform:scale(.97)}
.def-grand__head .def-grand__orb[data-speaks].is-speaking{transform:scale(1.12)}