/* Adam Mackay link hub, variant B.
   Palette and usage rules from documents/rebrand/muvin-lime-boards.html.
   White ground, bottle green type, lime held under 5% of the page and used as a
   field only: no lime letterform, number, hairline or icon on white (1.18:1).
   A lime-coloured word on white is set in lime dark #607800 at 5.02:1.
   Type is Gambetta and Hanken Grotesk, standing in for Azo Sans and Poppins. */

@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{
  --white:#ffffff;
  --lime:#ccff00;
  --lime-dark:#607800;
  --bottle:#0b3d25;
  --carbon:#1a1a1a;
  --muted:#5a5a5a;
  --rule:#dcdcdc;
  --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(--white);
  color:var(--carbon);
  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(--bottle);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--bottle);color:var(--white);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:#e8e8e5;
  border:3px solid var(--bottle);
  box-shadow:0 0 0 6px var(--lime),0 16px 32px -20px rgba(26,26,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;
  color:var(--bottle);
  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(--lime-dark);
  margin:0 0 .7rem;
}
.hub-line{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:var(--muted);
}

/* 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(--white);
  border:1px solid var(--rule);
  color:var(--carbon);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.link:hover{transform:translateY(-2px);border-color:var(--bottle);box-shadow:inset 4px 0 0 0 var(--lime)}
.link:active{transform:translateY(0)}
.link-icon{flex:0 0 auto;width:26px;height:26px;color:var(--bottle)}
.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;
  color:var(--bottle);
}
.link-sub{
  display:block;
  font-size:.82rem;
  line-height:1.35;
  color:var(--muted);
  margin-top:.12rem;
}
.link-arrow{flex:0 0 auto;width:16px;height:16px;color:var(--bottle);opacity:.6}
.link-arrow svg{width:100%;height:100%;display:block}

/* Primary action. Lime field, carbon ink at 14.81:1. */
.link-primary{
  background:var(--lime);
  border-color:var(--lime);
  color:var(--carbon);
  min-height:76px;
}
.link-primary:hover{background:var(--lime);border-color:var(--bottle);box-shadow:none}
.link-primary .link-icon,
.link-primary .link-arrow{color:var(--bottle)}
.link-primary .link-arrow{opacity:1}
.link-primary .link-title{color:var(--carbon);font-size:1.1rem}
.link-primary .link-sub{color:var(--bottle);font-weight:500}

/* Footer. The base strip is the lime from the board. */
.hub-foot{
  margin-top:2.25rem;
  padding-top:1.6rem;
  border-top:6px solid var(--lime);
  text-align:center;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.hub-foot a{text-decoration:none;color:var(--bottle)}
.hub-foot a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px;text-decoration-color:var(--lime)}

@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}
}