/* ============================================================
   FOOTER: GET IN TOUCH
   The footer of every page is the way to get in touch, on the ground grey
   below a rule (on the homepage it continues the grey band above it). One job: get the email address
   into someone's hands. The address itself is the button - click copies it -
   because mailto only works for people with a desktop mail app set up.

   Two columns on the page grid from 840px (the gap is the projects grid's):
   the title, line and a live status on the left, the email and LinkedIn
   buttons on the right, centred on the text block. One column below.
   Under a rule, the copyright and the legal links.
   ============================================================ */

footer.rd-foot{
  display:block;background:var(--paper);color:var(--ink-2);
  padding:clamp(64px,8vw,112px) 0 0;border:0;
  font-size:inherit;line-height:inherit;
}
/* the footer is its own grey band with a rule above, as the homepage's lower
   band is; on the homepage it simply continues that band */
footer.rd-foot{background:var(--ground);border-top:1px solid var(--rule);}
main:has(> .ground:last-child) + footer.rd-foot{border-top:0;}

.foot-contact{display:grid;gap:clamp(28px,4vw,40px);}
@media (min-width:840px){
  /* the buttons centre on the whole text block, not on its last line */
  .foot-contact{grid-template-columns:1fr 1fr;column-gap:calc(2 * var(--cell-pad));align-items:center;}
}

/* title-1 from the type scale, the size of the How I work statement */
.contact-title{
  font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 96;
  font-size:var(--t-1-size);line-height:var(--t-1-lh);letter-spacing:var(--t-1-ls);
  color:var(--ink);margin:0;
}
.contact-line{
  font-family:var(--body);font-size:var(--t-body);line-height:1.55;color:var(--ink-2);
  margin:clamp(8px,0.9vw,12px) 0 0;max-width:38em;
}

/* when to expect a reply: the time in New York, and whether it is working
   hours there (js/now.js). Hidden until the script fills it. */
.contact-now{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:clamp(12px,1.2vw,16px) 0 0;
  font-family:var(--body);font-size:var(--t-sm-size);line-height:1.4;color:var(--ink-2);
}
.now-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rule-2);}
.contact-now.is-on .now-dot{background:var(--status-on);box-shadow:0 0 0 3px color-mix(in oklch,var(--status-on) 22%,transparent);}
.contact-now.is-on [data-now-status]{color:var(--ink);}
.now-sep{color:var(--rule-2);}

/* one row: the email takes the room, LinkedIn hugs its content at the same
   height; LinkedIn wraps under the email when the row is too narrow */
.contact-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;position:relative;}
.contact-actions .email-copy{flex:1 1 auto;width:auto;}

.email-copy{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;
  min-height:56px;padding:10px 10px 10px clamp(16px,1.6vw,20px);
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.0625rem,0.9rem + 0.55vw,1.375rem);   /* 17 -> 22: room for LinkedIn on the same row */
  letter-spacing:-0.01em;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  cursor:pointer;transition:border-color var(--hover-t) ease,color var(--hover-t) ease;
}
@media (hover:hover){.email-copy:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text);}}   /* 2px hover stroke (css/shape.css for smooth corners) */
@media (hover:hover){.email-copy:hover .email-state{color:var(--accent-text);}}
.email-copy:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

.email-state{
  position:relative;flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;
  display:grid;place-items:center;
  background:var(--sink);color:var(--ink);
  transition:background-color .35s ease,color .35s ease,transform .15s ease;
}
.email-state svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media (hover:hover){.email-copy:hover .email-state{transition-duration:var(--hover-t);}}
/* copied: the copy icon lifts away, the tile fills with the interaction blue
   (paper on --accent-text: 5.25:1 light, 7.9:1 dark) and the check draws
   itself in. Going back, the check fades and the copy icon settles in. */
.email-state .i-copy{transition:transform .45s cubic-bezier(.2,.8,.3,1),opacity .25s ease;}
.email-state .i-done{stroke-width:1.9;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset 0s linear .3s,opacity .3s ease;}
.email-copy.is-copied .email-state{background:var(--accent-text);color:var(--paper);transition-duration:.25s;}
@media (hover:hover){.email-copy.is-copied:hover .email-state{background:var(--accent-text);color:var(--paper);}}
.email-copy.is-copied .i-copy{transform:translateY(-10px) scale(.7);opacity:0;transition-duration:.3s,.15s;}
.email-copy.is-copied .i-done{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset .4s cubic-bezier(.65,0,.35,1) .12s,opacity .1s ease .12s;}
.email-copy:active .email-state{transform:scale(.94);}
@media (prefers-reduced-motion:reduce){
  .email-state .i-copy,.email-copy.is-copied .i-copy{transform:none;}
  .email-state .i-done,.email-copy.is-copied .i-done{stroke-dashoffset:0;transition:opacity .2s ease;}
  .email-copy:active .email-state{transform:none;}
}

/* an address inside running text (legal pages): reads as a link, copies on
   click like the footer button, a small copy mark after it */
.copy-link{
  display:inline;padding:0;margin:0;border:0;background:none;cursor:pointer;
  font:inherit;color:var(--ink);text-align:inherit;
  text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;
  transition:color var(--hover-t,.1s) ease,text-decoration-color var(--hover-t,.1s) ease;
}
.copy-link-i{display:inline-block;width:.95em;height:.95em;margin-left:.25em;vertical-align:-.12em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.6;}
@media (hover:hover){.copy-link:hover{color:var(--accent-text);text-decoration-color:var(--accent-text);}.copy-link:hover .copy-link-i{opacity:1;}}
.copy-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;}

/* ---------- the toast ----------
   Every copy is confirmed at the bottom centre of the screen, clear of the
   thumb and cursor: what happened, and what is now on the clipboard. It
   rises in, the check draws, and it sinks away after a moment. */
.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom, 0px));z-index:80;
  display:flex;align-items:center;gap:12px;
  max-width:calc(100vw - 32px);padding:10px 20px 10px 10px;
  background:var(--ink);color:var(--paper);border-radius:999px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.12);
  font-family:var(--body);font-size:var(--t-sm-size);line-height:1.3;
  pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,16px) scale(.96);
  transition:opacity .2s ease,transform .3s cubic-bezier(.4,0,1,1),visibility 0s linear .3s;
}
.toast.is-on{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .2s ease,transform .5s cubic-bezier(.2,1.2,.4,1),visibility 0s;
}
.toast-mark{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;}
.toast-mark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;}
.toast.is-on .toast-mark svg{animation:toast-check .4s cubic-bezier(.65,0,.35,1) .15s forwards;}
.toast.is-ping .toast-mark svg{animation:toast-check .4s cubic-bezier(.65,0,.35,1) forwards;}
.toast.is-hint .toast-mark{background:color-mix(in oklch,var(--paper) 22%,transparent);}
@keyframes toast-check{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
.toast-text{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;min-width:0;}
.toast-text b{font-weight:600;white-space:nowrap;}
.toast-text span{color:color-mix(in oklch,var(--paper) 68%,var(--ink));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* phones: what happened over what was copied, never a broken address */
@media (max-width:479px){.toast-text{flex-direction:column;align-items:flex-start;}.toast-text span{max-width:100%;}}
@media (prefers-reduced-motion:reduce){
  .toast,.toast.is-on{transform:translate(-50%,0);transition:opacity .2s ease,visibility 0s linear .2s;}
  .toast.is-on{transition:opacity .2s ease,visibility 0s;}
  .toast-mark svg{stroke-dashoffset:0;}
  .toast.is-on .toast-mark svg,.toast.is-ping .toast-mark svg{animation:none;}
}


/* ---------- LinkedIn ----------
   Hugs its content, as tall as the email button: LinkedIn's own blue tile
   with the "in" mark, then the name. On hover the stroke and the name take
   the site's blue, and in the tile the mark slides up and out as an arrow
   slides in: it goes somewhere. */
.social-link{
  flex:none;display:flex;align-items:center;gap:12px;
  min-height:56px;padding:10px clamp(16px,1.6vw,20px) 10px 10px;
  color:var(--ink);text-decoration:none;
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  transition:border-color var(--hover-t) ease,color var(--hover-t) ease;
}
.sl-name{
  font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 96;
  font-size:clamp(1.0625rem,0.9rem + 0.55vw,1.375rem);letter-spacing:-0.01em;   /* the email's size */
}
.sl-tile{
  --linkedin:#0a66c2;   /* LinkedIn's brand blue: white on it is 5.8:1 */
  position:relative;flex:none;width:40px;height:40px;border-radius:10px;overflow:hidden;
  background:var(--linkedin);color:#fff;
}
.sl-tile svg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  transition:transform .32s cubic-bezier(.65,0,.35,1);}
.sl-tile .i-in{fill:currentColor;}
.sl-tile .i-go{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:translateY(34px);}
@media (hover:hover){
  .social-link:hover{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent-text);}   /* 2px hover stroke (css/shape.css for smooth corners) */
  /* site.css underlines every footer link on hover; a button does not */
  footer.rd-foot .social-link:hover{text-decoration:none;}
  .social-link:hover .i-in{transform:translateY(-34px);}
  .social-link:hover .i-go{transform:none;}
}
.social-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){ .sl-tile svg{transition:none;} }

/* ---------- the legal line ---------- */
.foot-legal{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;
  margin-top:clamp(40px,4.5vw,64px);padding-block:0 clamp(28px,3.4vw,44px);
  /* no rule: spacing alone separates it; the label size, a step under the
     footer's small text, so it reads as fine print */
  font-family:var(--body);font-size:var(--t-label-size);line-height:1.4;color:var(--ink-3);
}
.foot-legal p{margin:0;}
.foot-credit span{white-space:nowrap;}
.foot-credit .foot-sep{margin-inline:.5em;color:var(--rule-2);}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 24px;}
footer.rd-foot .foot-links a{color:var(--ink-3);text-decoration:none;padding:0;margin:0;display:inline;transition:color var(--hover-t) ease;}
@media (hover:hover){footer.rd-foot .foot-links a:hover{color:var(--accent-text);text-decoration:none;}}
/* touch: the legal links get a 44px target; site.css's old rule for bare
   footer links would pad the buttons too, so they keep their own */
@media (pointer:coarse), (max-width:768px){
  footer.rd-foot .foot-links a{display:inline-block;padding-block:12px;margin:0;}   /* site.css adds a 22px right margin here */
  footer.rd-foot .social-link{display:flex;padding:10px clamp(16px,1.6vw,20px) 10px 10px;margin:0;}
}

/* ---------- phones: one row each ----------
   The email and LinkedIn share a row: LinkedIn shows only its brand tile, a
   square as tall as the email button, with its name kept for screen readers,
   and the address steps down to 15px. The copyright and the legal links share
   a row too. Both still wrap on the narrowest screens rather than push the
   page wider than the phone. */
@media (max-width:479px){
  .contact-actions{gap:10px;}
  .contact-actions .email-copy{flex:1 1 auto;padding-left:14px;gap:10px;font-size:15px;}
  footer.rd-foot .social-link{padding:10px;gap:0;}
  .sl-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .foot-legal{gap:4px 12px;}
  .foot-links{gap:4px 14px;}
  .foot-links{white-space:nowrap;}
}