/* Email: the address is the call to action.
   A mailto link does nothing for the many visitors who read mail in a browser (no mail app is set up),
   so every "Email me" copies the address instead (assets/site/email.js) and the closing sets the
   address itself across the .wrap, where it can be read, copied by hand or tapped.

   .email-big        the closing's address block: the address across the .wrap, then a button pair,
                     "Copy address" and "Open mail app"
   .btn--reveal      the hero button that shows the address
   .copy-toast       the note at the bottom of the screen after a button copies the address */

/* ---------------------------------------------------------------- the address across the .wrap */
/* Its size comes from the block's own width (container units), so the address fills the .wrap on
   every screen from 320 to 1920 without a script and without moving after the font loads.
   --email-fit is how many percent of the width one em takes, measured in Instrument Sans at 96%
   width and -0.04em tracking so the address fills about 99% of the .wrap. One line on every
   screen: split at the @, "hello" against "@nattapad.com" gains almost nothing on a phone.
   The link box runs from the .wrap's left line to its right line, and so does its underline. */
.email-big { --email-fit: 11.8; container-type: inline-size; display: grid; gap: var(--s-6); margin-top: auto; }
.email-big__addr {
  position: relative; display: block; width: 100%;
  font: var(--display-weight) calc(var(--email-fit) * 1cqi)/1 var(--font-display);
  font-stretch: var(--display-stretch, 100%); letter-spacing: -0.04em; white-space: nowrap;
  color: var(--ink); text-decoration: none; cursor: copy;
  padding-bottom: 0.07em;
  -webkit-tap-highlight-color: transparent;
}
/* the underline that draws: an ink line over a faint rest line (it reads as a link at rest, WCAG
   1.4.1); it draws from the left on hover or focus and leaves to the right */
.email-big__addr::before, .email-big__addr::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.email-big__addr::before { height: max(1px, 0.015em); background: var(--line-strong); }
.email-big__addr::after { height: max(2px, 0.03em); background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--m-out, .3s) var(--m-ease, ease); }
.email-big__addr:is(:hover, :focus-visible)::after, .email-big__addr.is-copied::after { transform: scaleX(1); transform-origin: left center; transition-duration: var(--m-in, .2s); }
.email-big__addr:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: var(--r-sm); }
/* the press: the address answers the click like a button does */
@media (hover: hover) and (pointer: fine) {
  html:not([data-motion="off"]) .email-big__addr:active { transform: translateY(1px); }
}
/* the pair under it: before the script runs the copy button is hidden ([hidden]), "Open mail app" stays */
.email-big .btn-row { margin-top: 0; }
/* a tablet (640-1023): side by side, "Open mail app" landed 7-20px off the footer's column line under
   it, so the pair stacks on the left line: the button, then the link with its letters on the line */
@media (min-width: 640px) and (max-width: 1023px) {
  .email-big .btn-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  html:is([data-buttons="arrow"], [data-buttons="block"]) .email-big .btn-row > .btn--secondary { padding-left: 0; }
}
/* a button that copied: its words say "Copied" and its icons give way to the tick */
.btn.is-copied > svg:not(.copy-check) { display: none; }
.copy-toast svg, .copy-check, .copy-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon { width: 14px; height: 14px; stroke-width: 1.5; }
.btn[hidden] { display: none; }
/* a copy button carries the copy icon, not the arrow the arrow buttons add after their words */
.btn:has(> .copy-icon)::after { content: none; display: none; }

/* ---------------------------------------------------------------- the hero button that shows the address
   Three labels share one slot: "Email me" (rest), the address (hover or focus with a mouse; always on
   a touch screen or a phone, where there is no hover to reveal it) and "Copied" (after a click). The
   slot's width moves between the labels' measured widths (--w-a, --w-b, set by email.js), and the
   labels slide up through it. The arrow becomes a copy icon with the address and a tick with
   "Copied". Without the script (no .is-ready) the button is the plain "Email me" mail link. */
.btn--reveal .reveal { display: inline-block; position: relative; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: top; }
.btn--reveal .reveal > span { display: block; white-space: nowrap; }
/* the address and "Copied" are drawn from data-label, so the button's own text stays "Email me" */
.btn--reveal :is(.reveal__b, .reveal__c)::before { content: attr(data-label); }
.btn--reveal:not(.is-ready) :is(.reveal__b, .reveal__c, .reveal__icon) { display: none; }
.btn--reveal.is-ready .reveal { width: var(--w-a); transition: width .32s var(--m-ease, cubic-bezier(.2, .7, .2, 1)); }
.btn--reveal.is-ready .reveal > span { position: absolute; left: 0; top: 0; transition: transform .32s var(--m-ease, cubic-bezier(.2, .7, .2, 1)), opacity .2s ease; }
.btn--reveal.is-ready :is(.reveal__b, .reveal__c) { opacity: 0; transform: translateY(100%); }
.reveal__icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.reveal__check { stroke-width: 2; }

/* the address: hover or keyboard focus with a mouse, or always on a touch screen and a phone */
@media (hover: hover) and (pointer: fine) {
  .btn--reveal.is-ready:is(:hover, :focus-visible):not(.is-copied) .reveal { width: var(--w-b); }
  .btn--reveal.is-ready:is(:hover, :focus-visible):not(.is-copied) .reveal__a { opacity: 0; transform: translateY(-100%); }
  .btn--reveal.is-ready:is(:hover, :focus-visible):not(.is-copied) .reveal__b { opacity: 1; transform: none; }
  .btn--reveal.is-ready:is(:hover, :focus-visible):not(.is-copied) > .m-arrow { display: none; }
  .btn--reveal.is-ready:is(:hover, :focus-visible):not(.is-copied) > .reveal__copy { display: block; }
}
@media (hover: none), (pointer: coarse), (max-width: 639px) {
  .btn--reveal.is-ready:not(.is-copied) .reveal { width: var(--w-b); }
  .btn--reveal.is-ready:not(.is-copied) .reveal__a { opacity: 0; transform: translateY(-100%); }
  .btn--reveal.is-ready:not(.is-copied) .reveal__b { opacity: 1; transform: none; }
  .btn--reveal.is-ready:not(.is-copied) > .m-arrow { display: none; }
  .btn--reveal.is-ready:not(.is-copied) > .reveal__copy { display: block; }
}
/* copied: the button keeps the width it had at the click; the slot takes the icon's place too
   (--w-hold = the slot, the gap and the icon, set by email.js) and "Copied" with its tick sits centred
   in it, so the button neither shrinks nor leaves a hole */
.btn--reveal .reveal__c { gap: var(--s-2); align-items: center; justify-content: center; }
.btn--reveal.is-ready .reveal__c { display: flex; width: 100%; height: 100%; }
.btn--reveal .reveal__c > .reveal__check { display: block; }
.btn--reveal.is-ready.is-copied .reveal { width: var(--w-hold, var(--w-b)); }
.btn--reveal.is-ready.is-copied :is(.reveal__a, .reveal__b) { opacity: 0; transform: translateY(-100%); }
.btn--reveal.is-ready.is-copied .reveal__c { opacity: 1; transform: none; }
.btn--reveal.is-ready.is-copied > :is(.m-arrow, .reveal__icon) { display: none !important; }

/* ---------------------------------------------------------------- the note after a copy */
.copy-toast {
  position: fixed; z-index: 1000; left: 50%; bottom: max(var(--s-6), calc(env(safe-area-inset-bottom) + var(--s-4)));
  display: flex; align-items: center; gap: var(--s-2);
  width: max-content; max-width: calc(100vw - 2 * var(--s-5)); padding: 12px 16px;
  background: var(--p-inv-bg, #111); color: var(--p-inv-ink, #fff); border-radius: var(--r-md);
  font: 500 var(--t-small)/1.4 var(--font-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  opacity: 0; transform: translate(-50%, 8px); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.copy-toast.is-on { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
/* when the copy failed the address stays to be selected by hand */
.copy-toast.is-manual { pointer-events: auto; user-select: all; -webkit-user-select: all; }
.copy-toast strong { font-weight: 600; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .email-big__addr, .email-big__addr::after, .copy-toast, .btn--reveal .reveal, .btn--reveal .reveal > span { transition: none !important; }
  .email-big__addr:active { transform: none; }
  .copy-toast { transform: translate(-50%, 0); }
}