/* ============================================================
   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{
  flex:none;width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--sink);color:var(--ink);
  transition:background-color var(--hover-t) ease,color var(--hover-t) ease;
}
.email-state svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.email-state .i-done{display:none;}
/* copied: the tile fills with the interaction blue, matching the hover
   state around it (paper on --accent-text: 5.25:1 light, 7.9:1 dark) */
.email-copy.is-copied .email-state{background:var(--accent-text);color:var(--paper);}
@media (hover:hover){.email-copy.is-copied:hover .email-state{background:var(--accent-text);color:var(--paper);}}
.email-copy.is-copied .i-copy{display:none;}
.email-copy.is-copied .i-done{display:block;}


.copy-status{
  /* under the buttons and out of the layout, so the pair stays a pair */
  position:absolute;left:0;top:calc(100% + 10px);
  min-height:1.5em;margin:0;
  font-family:var(--body);font-size:var(--t-sm-size);color:var(--ink-2);
}

/* ---------- 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-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-legal p{white-space:nowrap;}
}