/* The close is pressed into the paper, like the carved mark above it (Carlos, 2026-09-24).
 *
 * Light comes from the top left, as everywhere on the page. A pressed letter shows its cut: the upper
 * wall in shade (an inner shadow along the top of each stroke) and the lower lip catching the light (a
 * fine bright line just beneath it); the SVG filters are in index.html. The ink is a little lighter than
 * the page's so the cut can show, and still reads at 6.6:1 against the paper (WCAG AA for any size).
 * The blanks are soft wells in the paper; the search is a raised paper button that presses in.
 *   default    a clear press, lighter ink (recommended: judged at 1:1, 2026-09-24)
 *   ?deboss=a  a slighter press in the page's full ink (barely visible at 1:1)
 *   ?deboss=c  the headline blind-debossed (paper-toned letters, the neumorphic extreme; about 1.4:1, fails WCAG)
 */
.homepage .close h2 { color: #4a594f; filter: url(#deboss-deep); }
.homepage .close .pressed { color: #4a594f; filter: url(#deboss-display); }

/* A blank keeps its punctuation on its line. */
.homepage .close .keep { white-space: nowrap; }
/* The blanks: wells pressed into the paper, deep enough to read as fields. */
.homepage .close .blank input { border: 0; border-radius: 13px; padding: .03em .36em .09em; margin: 0;
  background: #f1ebde; box-shadow: inset 2px 3px 6px rgba(150,133,101,.32), inset -2px -2px 5px rgba(255,255,255,.92);
  transition: box-shadow .35s ease, background-color .35s ease; }
.homepage .close .blank input:not(:placeholder-shown) { background: #f3eee2; }
.homepage .close .blank input:focus { border: 0; box-shadow: inset 3px 4px 8px rgba(150,133,101,.36), inset -2px -2px 6px rgba(255,255,255,.95), 0 0 0 1.5px rgba(46,139,87,.55); }
.homepage .close .blank input:focus-visible { border: 0; margin-bottom: 0; }
.homepage .close .blank.missing input { box-shadow: inset 2px 3px 6px rgba(150,133,101,.32), inset -2px -2px 5px rgba(255,255,255,.92), 0 0 0 1.5px rgba(46,64,56,.6); }
.homepage .close .blank input::placeholder { color: #6d756f; opacity: .78; }

/* A quiet sign that the blanks take typing: the first well shows a caret while it is empty and waiting, and
   any well deepens a little under the pointer. Nothing else moves. */
.homepage .close .brief-line > .blank { position: relative; }
.homepage .close .brief-line > .blank:has(input:placeholder-shown):not(:focus-within)::after { content: ""; position: absolute; left: .36em; top: .24em; bottom: .30em; width: 1.5px; border-radius: 1px; background: #0d6642; animation: brief-wait 1.15s steps(1,end) infinite; pointer-events: none; }
@keyframes brief-wait { 50% { opacity: 0; } }
html.motion-paused .homepage .close .brief-line > .blank:has(input:placeholder-shown):not(:focus-within)::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .homepage .close .brief-line > .blank:has(input:placeholder-shown):not(:focus-within)::after { animation: none; } }
.homepage .close .blank input:hover:not(:focus) { box-shadow: inset 3px 4px 8px rgba(150,133,101,.36), inset -2px -2px 6px rgba(255,255,255,.95); }
.homepage .close .blank input { cursor: text; }

/* The search: a raised paper button that presses in. */
.homepage .close .brief-go { margin-top: 34px; padding: 15px 30px 16px; border: 0; border-radius: 999px; background: #f7f3ea; color: var(--ink); font-size: 16px; letter-spacing: .01em;
  box-shadow: -6px -6px 14px rgba(255,255,255,.95), 6px 7px 16px rgba(150,133,101,.27), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: box-shadow .35s ease, color .35s ease; }
.homepage .close .brief-go:hover, .homepage .close .brief.complete .brief-go { color: var(--jade-deep); }
.homepage .close .brief-go:active { box-shadow: inset 4px 4px 10px rgba(150,133,101,.26), inset -4px -4px 10px rgba(255,255,255,.92); }
.homepage .close .brief-go:focus-visible { outline: none; box-shadow: -6px -6px 14px rgba(255,255,255,.95), 6px 7px 16px rgba(150,133,101,.27), 0 0 0 2px var(--jade); }
.homepage .contact-form { max-width: 470px; margin-top: 22px; }
.homepage .contact-form .brief-note { margin: 0 auto 20px; }
.homepage .contact-fields { display: grid; gap: 14px; text-align: left; }
.homepage .contact-field { display: grid; gap: 7px; color: var(--ink); font: 400 15px/1.3 var(--face); }
.homepage .contact-field small, .homepage .contact-choice small { color: var(--quiet-ink); font: 400 12px/1.3 var(--face); margin-left: 5px; }
.homepage .contact-field input, .homepage .contact-field textarea { width: 100%; box-sizing: border-box; border: 0; border-radius: 12px; padding: 11px 14px; background: #f1ebde; color: var(--ink); font: 400 16px/1.4 var(--face); box-shadow: inset 2px 3px 6px rgba(150,133,101,.28), inset -2px -2px 5px rgba(255,255,255,.92); }
.homepage .contact-field textarea { resize: vertical; min-height: 80px; max-height: 180px; }
.homepage .contact-field input::placeholder, .homepage .contact-field textarea::placeholder { color: #6d756f; opacity: .8; }
.homepage .contact-field input:focus-visible, .homepage .contact-field textarea:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.homepage .contact-choice { border: 0; margin: 0; padding: 0; min-width: 0; color: var(--ink); font: 400 15px/1.3 var(--face); }
.homepage .contact-choice legend { padding: 0; margin-bottom: 9px; }
.homepage .contact-options { display: flex; gap: 10px; }
.homepage .contact-options label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #f7f3ea; box-shadow: -3px -3px 8px rgba(255,255,255,.85), 3px 4px 8px rgba(150,133,101,.2); cursor: pointer; }
.homepage .contact-options input { accent-color: var(--jade-deep); }
.homepage .contact-options label:has(input:focus-visible) { outline: 2px solid var(--jade); outline-offset: 2px; }
.homepage .contact-status { min-height: 1.3em; margin: 10px 0 0; color: var(--jade-deep); font: 400 14px/1.3 var(--face); }
.homepage .contact-status[data-error] { color: #8d453d; }
.homepage .contact-form .brief-go { margin-top: 9px; }
.homepage .contact-form .brief-go:disabled { opacity: .55; cursor: wait; }

/* Variants for comparison. */
html[data-deboss="a"] .homepage .close h2 { color: #2c3f35; filter: url(#deboss-display); }
html[data-deboss="a"] .homepage .close .pressed { color: #2c3f35; filter: url(#deboss-text); }
html[data-deboss="c"] .homepage .close h2 { color: #ebe4d4; filter: url(#deboss-deep); }

@media (max-width:900px) {
  .homepage .close .blank input { border-radius: 10px; }
  .homepage .close .brief-go { margin-top: 26px; padding: 13px 26px 14px; font-size: 15px; }
  .homepage .contact-form { margin-top: 16px; }
  .homepage .contact-form .brief-note { margin-bottom: 14px; }
  .homepage .contact-fields { gap: 11px; }
  .homepage .contact-form .brief-go { margin-top: 7px; }
}

/* The close holds still while the silk gathers into the 人 above its headline (journey-director.js):
   the section is taller than the screen and its frame is pinned, so the mark forms in place, and the
   headline and the brief rise in beneath it once it has. */
.homepage .page .chapter.close { display: block; position: relative; align-content: normal; height: 190vh; height: 190svh; min-height: 0; padding: 0; }   /* Chrome now honours align-content on blocks */
.homepage .contact-anchor { position: absolute; bottom: 0; left: 0; }
.homepage .page .chapter.close::before { content: none; }
.homepage .close-inner { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: 1fr auto auto auto 1.2fr; justify-items: center; padding: 0 var(--edge-x); }
.homepage .close-inner::before { content: ""; grid-row: 2; height: calc(clamp(92px, 15vh, 150px) + clamp(30px, 5.4vh, 58px)); }
.homepage .close-copy { opacity: var(--close-head, 1); transform: translateY(calc((1 - var(--close-head, 1)) * 18px)); }
.homepage .close .brief { opacity: var(--close-brief, 1); transform: translateY(calc((1 - var(--close-brief, 1)) * 18px)); }
html.no-gl .homepage .close-inner::before { width: 150px; background: url("assets/ren-mark-jade.jpg") center top / auto clamp(92px, 15vh, 150px) no-repeat; mix-blend-mode: multiply; }
@media (max-width: 640px) { .homepage .close-inner { padding: 0 18px; } }