/* Adam Mackay link hub. Palette and type lifted from the Muvin site system:
   Gambetta display, Hanken Grotesk body, bone paper, camel accent, espresso ink. */

@font-face{font-family:Gambetta;src:url(fonts/gambetta-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gambetta;src:url(fonts/gambetta-500i.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bone:#f4f0e9;
  --paper:#fbf9f4;
  --ink:#23201c;
  --ink-soft:#6e665b;
  --camel:#9c7a50;
  --camel-dark:#82643f;
  --camel-light:#cd9d61;
  --espresso:#26201a;
  --line:#e1d9cc;
  --on-camel:#fbf9f4;
  --on-camel-soft:#f1e7da;
  --display-font:Gambetta,Georgia,"Times New Roman",serif;
  --body-font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body-font);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--camel-dark);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--espresso);color:var(--paper);padding:.75rem 1.25rem;z-index:10;text-decoration:none}
.skip-link:focus{left:0}

.hub{
  width:100%;
  max-width:460px;
  margin:0 auto;
  padding:clamp(2rem,7vw,3.25rem) clamp(1.15rem,5vw,1.5rem) 2.5rem;
}

/* Header */
.hub-head{text-align:center;margin-bottom:clamp(1.75rem,6vw,2.25rem)}
.avatar{
  position:relative;
  width:108px;height:108px;
  margin:0 auto 1.1rem;
  border-radius:50%;
  overflow:hidden;
  background:var(--line);
  border:3px solid var(--paper);
  box-shadow:0 14px 30px -18px rgba(38,32,26,.55);
}
.avatar img{
  position:absolute;
  max-width:none;
  width:200%;height:200%;
  left:-59%;top:-14%;
  object-fit:cover;
}
.hub-name{
  font-family:var(--display-font);
  font-weight:500;
  font-size:2.1rem;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .45rem;
}
.hub-role{
  font-family:var(--body-font);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--camel-dark);
  margin:0 0 .7rem;
}
.hub-line{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-soft);
}

/* Links */
.links{display:flex;flex-direction:column;gap:.7rem}
.link{
  display:flex;
  align-items:center;
  gap:.9rem;
  min-height:68px;
  padding:.85rem 1.1rem;
  text-decoration:none;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink);
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.link:hover{transform:translateY(-2px);border-color:var(--camel);background:#fff}
.link:active{transform:translateY(0)}
.link-icon{flex:0 0 auto;width:26px;height:26px;color:var(--camel-dark)}
.link-icon svg{width:100%;height:100%;display:block}
.link-text{min-width:0;flex:1 1 auto}
.link-title{
  display:block;
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.005em;
  line-height:1.25;
}
.link-sub{
  display:block;
  font-size:.82rem;
  line-height:1.35;
  color:var(--ink-soft);
  margin-top:.12rem;
}
.link-arrow{flex:0 0 auto;width:16px;height:16px;color:var(--camel-dark);opacity:.7}
.link-arrow svg{width:100%;height:100%;display:block}

.link-primary{
  background:var(--camel-dark);
  border-color:var(--camel-dark);
  color:var(--on-camel);
  min-height:76px;
}
.link-primary:hover{background:#6f5435;border-color:#6f5435}
.link-primary .link-icon,
.link-primary .link-arrow{color:var(--on-camel);opacity:1}
.link-primary .link-title{font-size:1.1rem}
.link-primary .link-sub{color:var(--on-camel-soft)}

/* Footer */
.hub-foot{
  margin-top:2.25rem;
  text-align:center;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-soft);
}
.hub-foot a{text-decoration:none}
.hub-foot a:hover{color:var(--camel-dark)}

@media (min-width:768px){
  .hub{padding-top:4rem}
  .avatar{width:124px;height:124px}
  .hub-name{font-size:2.4rem}
}

@media (prefers-reduced-motion:reduce){
  .link{transition:none}
  .link:hover{transform:none}
}