/* Work with me (P05): the last page of the piece. One confident line, one sentence of availability, two ways in
   (Direct, Hire me on), then the quiet foot of the site. No buttons, no arrows, no badges, no icons, no logos.
   Large screens grow through the shared tokens and css/large.css. */

.close { position: relative; padding: 120px var(--m) 136px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--g); align-items: start;
  /* release pass, 8 Oct 2026: nothing in this section may push the page sideways. With every element's own text doubled
     (an accessibility stress test) the Contra and Upwork hover patch (.close-name::before) reached up to 39 px past the
     screen edge. Clipping at the section's edges, which are the screen's edges, removes that; the field itself is not
     clipped, because at that size the names are wider than their field. At normal sizes nothing reaches this edge. */
  overflow-x: clip; }
.close .rule-h { top: 0; }
.close-eyebrow { color: var(--ink-3); }
.close-title { margin: 22px 0 0; font-size: clamp(2.75rem, 5.4vw, calc(4.875rem * var(--display-boost))); line-height: 0.98; letter-spacing: -0.05em;
  text-wrap: balance; }
.close-title em { display: block; }   /* two lines at every width: the question turns on its second line */
.close-line { margin-top: 28px; }

/* two ways in (P05 final, from study E5). Built from real materials only: the slot and the field are the brushwork of
   David's 2016 landscape painting (at or below native resolution); the sheet is the site's own paper. Ink layers
   multiply into the page, so the paper shows through them. Both sides share one structure: the label on one line, the
   artwork on one baseline (the slot's lower edge and the field's painted edge), then the brief link under its mark.
   --k scales the pair: 1 on desktop, smaller on tablets and phones, 1.45 on very large screens. */
.close-actions { --k: 1; --kt: 1; grid-column: 1 / span 12; grid-row: 4; margin-top: 4.5rem; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.close-direct, .close-hire { display: contents; }
.close-label { color: var(--ink-3); margin: 0 0 18px; align-self: end; }
.close-stage { align-self: end; }   /* both stages end on the shared baseline */
.close-direct .close-label { grid-column: 1 / span 6; grid-row: 1; }
.close-direct .close-stage { grid-column: 1 / span 6; grid-row: 2; width: min(calc(32.5rem * var(--k)), 100%); }
.close-brief { grid-column: 1 / span 6; grid-row: 3; justify-self: start; margin-top: calc(2.6rem * var(--k));
  font-family: var(--serif); font-weight: 600; font-size: calc(1.75rem * var(--kt)); letter-spacing: -0.035em; line-height: 1.1; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px;
  transition: background-size var(--t-micro) var(--expo); }
.close-hire .close-label { grid-column: 7 / span 6; grid-row: 1; }
.close-hire .close-stage { grid-column: 7 / span 6; grid-row: 2; width: min(calc(32.2rem * var(--k)), 100%); }

/* DIRECT: the mark holds its proportion (1040 x 433); its slot's lower edge is the baseline, so the part below it hangs
   under the stage (a margin in percent of the width, which is the mark's own width) */
.close-mark { position: relative; width: 100%; aspect-ratio: 1040 / 433; margin-bottom: -4.26%; }
.close-mark__layer, .close-mark__layer img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.close-mark__ink { mix-blend-mode: multiply; }
.close-mark__clip { position: absolute; inset: 0; clip-path: inset(0 0 28% 0); }   /* just inside the slot's top lip: the slot is in front */
.close-mark__sheet { position: absolute; inset: 0; transition: transform var(--t-micro) var(--expo); }
/* hover (only where there is hover) and keyboard focus: the sheet slips a little further into the slot */
@media (hover: hover) {
  .close-actions:has(.close-brief:hover) .close-mark__sheet, .close-direct:has(.close-stage:hover) .close-mark__sheet { transform: translateY(3.2%); }
  .close-brief:hover { background-size: 0% 1px; background-position: 100% 100%; }
}
.close-actions:has(.close-brief:focus-visible) .close-mark__sheet { transform: translateY(3.2%); }
.close-mark__sheet.is-dipping { transform: translateY(11%); transition-duration: 260ms; }   /* click: a quick dip; the mailto opens at once */

/* HIRE ME ON: the real-paint field (1300 x 374, its lowest fifth is its own cast shadow); the names are live text set in
   it, sized with the field (container units) so they always sit inside the paint */
.close-field { position: relative; width: 100%; aspect-ratio: 1300 / 374; margin-bottom: -6.4%; container-type: inline-size;
  display: flex; align-items: center; justify-content: center; padding-bottom: 6.16%; }
.close-field__paint { position: absolute; inset: 0; mix-blend-mode: multiply; }
.close-field__img, .close-field__img img { display: block; width: 100%; height: 100%; }
.close-name { position: relative; z-index: 1; font-family: var(--sans); font-weight: 500; font-size: 4.66cqi; letter-spacing: 0.14em;
  text-transform: uppercase; color: #ECE5D7; padding: 0.4em 0.25em; text-decoration: none; }
.close-sep { position: relative; z-index: 1; width: 1px; height: 5.9cqi; margin: 0 4.4cqi; background: #CFC6B4; }
/* the ink lifts in a rough, brush-edged patch behind that word only (a mask cut from the real brushwork) */
.close-name::before { content: ''; position: absolute; inset: -0.55em -1.1em; z-index: -1; opacity: 0;
  transition: opacity var(--t-micro) var(--expo); }
/* the patch's paper and mask are only requested once the close is near the screen (js/close.js adds .is-near) */
.close-actions.is-near .close-name::before { background: url("/assets/close/hover-paper.webp") center / 400px 300px;
  -webkit-mask: url("/assets/close/hover-mask.webp") center / 100% 100% no-repeat; mask: url("/assets/close/hover-mask.webp") center / 100% 100% no-repeat; }
@media (hover: hover) { .close-name:hover { color: var(--ink); } .close-name:hover::before { opacity: 1; } }
.close-name:focus-visible { color: var(--ink); outline: 2px solid var(--ink); outline-offset: 4px; }
.close-name:focus-visible::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .close-mark__sheet, .close-name::before, .close-brief { transition: none; }
  .close-mark__sheet, .close-mark__sheet.is-dipping { transform: none !important; }
}

/* the foot */
.foot { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px;
  padding: 28px var(--m) 40px; border-top: 1px solid var(--hair); margin: 0 var(--m); padding-left: 0; padding-right: 0; }
.foot-mark { margin: 0; color: var(--ink); }
.foot-meta { margin: 0; color: var(--ink-3); }

/* desktop: the question, generous paper, then the two ways in across the full measure of the page */
@media (min-width: 1100px) {
  .close-eyebrow { grid-column: 1 / span 4; grid-row: 1; }
  .close-title { grid-column: 1 / span 8; grid-row: 2; }
  .close-line { grid-column: 1 / span 5; grid-row: 3; }
}
/* tablets: the same two columns, the pair a little smaller */
@media (max-width: 1099px) and (min-width: 820px) {
  .close-eyebrow, .close-title { grid-column: 1 / span 11; }
  .close-line { grid-column: 1 / span 7; }
  .close-actions { --k: 0.84; }
}
/* phones: one column; Direct, then Hire me on */
@media (max-width: 819px) {
  .close { display: block; padding: 80px var(--m) 72px; }
  .close-title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .close-actions { --k: 0.66; --kt: 0.86; margin-top: 3.5rem; grid-template-columns: minmax(0, 1fr); }
  .close-direct .close-label, .close-direct .close-stage, .close-brief, .close-hire .close-label, .close-hire .close-stage { grid-column: 1; }
  .close-direct .close-label { grid-row: 1; } .close-direct .close-stage { grid-row: 2; } .close-brief { grid-row: 3; }
  .close-hire .close-label { grid-row: 4; margin-top: 3.5rem; } .close-hire .close-stage { grid-row: 5; }
  .foot { flex-direction: column; gap: 10px; padding-bottom: 32px; }
}
/* very large screens: the pair grows with the page, proportions kept */
@media (min-width: 2400px) { .close-actions { --k: 1.45; --kt: 1.45; } }