/* shared chrome for every page: the floating pill nav and the maroon footer.
   needs these tokens on :root → --paper --ink --accent --display --mono --col --gut --nav-h --ease-snap */
/* ── Nav: a floating pill, avatar + name left, links centre, resume right ── */
.nav.pill{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;
  width:min(100% - 2 * var(--gut),var(--col));height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:0 10px 0 10px;border-radius:999px;
  background:rgba(249,243,231,.97);background:color-mix(in srgb,var(--paper) 97%,transparent);border:1px solid rgba(10,41,36,.14);
  box-shadow:0 14px 34px -22px rgba(10,41,36,.45),0 1px 0 rgba(255,255,255,.6) inset;
}
.brand{display:flex;align-items:flex-end;gap:10px;flex:none;padding:0 10px 0 6px;border-radius:999px;align-self:stretch}
.brand img{width:54px;height:auto;display:block;margin:-14px 0 4px;filter:drop-shadow(0 2px 0 rgba(10,41,36,.12))} /* the mascot pokes above the pill's top edge */
.brand-name{padding-bottom:22px}
.brand-name{font-weight:600;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);margin:0 auto}
.nav-links a.link{
  font-weight:500;font-size:1rem;letter-spacing:-.005em;color:var(--ink);opacity:.72;
  padding:6px 2px;border-bottom:1.5px solid transparent;
  transition:opacity .18s ease-out,border-color .18s ease-out;
}
.nav-links a.link:hover,.nav-links a.link:focus-visible{opacity:1;border-bottom-color:var(--accent)}
.nav-links a.link[aria-current="true"]{opacity:1;font-weight:700}
.resume{
  flex:none;color:var(--ink);background:transparent;border:1.5px solid var(--ink);
  font-weight:700;font-size:.92rem;letter-spacing:-.005em;
  padding:9px 18px;border-radius:999px;
  display:inline-flex;align-items:center;gap:.4em;
  transition:background .18s ease-out,color .18s ease-out,transform .18s var(--ease-snap);
}
.resume:hover,.resume:focus-visible{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.resume svg{width:.62em;height:.62em}
@media (max-width:840px){
  .nav.pill{top:10px;height:auto;min-height:56px;padding:6px 8px;border-radius:28px;gap:8px 12px;flex-wrap:wrap}
  .brand{padding:0 8px 0 4px;align-self:auto;align-items:center}.brand img{width:46px;margin:-12px 0 0}
  .brand-name{display:none}
  .nav-links{gap:10px 14px;flex-wrap:wrap;justify-content:center;order:3;width:100%;padding:0 6px 4px}
  .nav-links a.link{font-size:.86rem}
  .resume{padding:7px 13px;font-size:.82rem;margin-left:auto}
}
@media (max-width:520px){
  .nav{flex-wrap:wrap}
  .nav-links{flex-wrap:wrap;row-gap:2px}
  .nav-links a.link{font-size:.84rem}
}

/* Lenis owns the scroll on every page: native smooth-scrolling must be off or the two fight and wheel scroll stutters */
html.lenis{scroll-behavior:auto!important}
html.lenis,html.lenis body{height:auto}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis iframe{pointer-events:none}

.connect{position:relative;z-index:3}
/* ── Let's connect: one big line, the verb keeps changing ────────── */
.connect{--connect-bg:#9E4A55;background:var(--connect-bg);color:var(--paper);padding:clamp(26px,2.8vw,36px) 0 0;overflow:visible;margin-top:0;
  background-image:repeating-linear-gradient(135deg,rgba(246,243,232,.07) 0 1px,transparent 1px 10px)}
.connect::before{ /* torn paper edge, the band peels away from the section above */
  content:"";position:absolute;left:0;right:0;top:-28px;height:30px;background:var(--connect-bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2028%20L0.0%208.7%20L6.9%2015.6%20L12.1%2015.1%20L15.3%207.3%20L18.9%2020.9%20L22.6%2017.3%20L31.3%2013.1%20L40.2%2021.5%20L44.9%208.1%20L49.7%203.8%20L56.2%2012.7%20L62.5%207.1%20L66.8%2013.7%20L71.6%2014.2%20L76.4%209.0%20L80.9%2015.5%20L89.2%204.9%20L98.0%2013.5%20L105.6%2014.8%20L108.8%2019.8%20L115.3%205.1%20L122.4%2016.4%20L128.2%2011.4%20L134.0%207.1%20L141.2%2023.9%20L149.1%2012.9%20L156.2%2014.3%20L160.2%207.1%20L167.8%2010.5%20L173.1%202.8%20L178.8%2021.9%20L186.7%204.8%20L192.2%2021.9%20L201.0%209.2%20L205.4%2014.7%20L211.9%206.1%20L217.4%2016.2%20L226.1%2015.3%20L232.8%207.0%20L241.2%2010.7%20L249.0%2013.2%20L252.6%207.1%20L256.0%208.9%20L261.1%206.0%20L265.0%2012.5%20L268.1%208.1%20L272.0%2012.3%20L277.2%2021.3%20L286.2%2014.7%20L289.7%2012.2%20L294.3%203.6%20L297.4%207.3%20L301.3%206.5%20L307.5%2010.6%20L314.6%2012.6%20L318.7%207.3%20L326.3%2010.0%20L334.2%2010.5%20L342.0%209.4%20L346.4%2012.4%20L349.6%2011.0%20L354.1%2023.2%20L359.8%2011.9%20L368.5%2010.0%20L372.9%209.7%20L379.6%2010.4%20L385.5%2020.4%20L389.0%2022.4%20L396.7%206.8%20L400.8%205.3%20L408.6%206.0%20L414.0%209.2%20L418.0%208.7%20L426.5%203.5%20L434.4%208.6%20L439.5%208.4%20L442.6%208.5%20L448.8%206.3%20L457.0%204.1%20L461.5%2010.3%20L468.0%2013.5%20L471.8%205.5%20L477.6%2022.3%20L483.1%207.0%20L489.3%206.3%20L494.9%206.1%20L502.7%2014.5%20L510.1%2011.9%20L516.2%2020.1%20L519.8%2010.5%20L524.5%207.1%20L530.8%2011.1%20L536.5%2015.1%20L542.6%2014.1%20L548.8%2022.9%20L556.0%2011.4%20L560.5%2023.0%20L568.6%208.2%20L574.2%2010.3%20L577.7%2020.1%20L586.0%2018.9%20L593.0%2021.9%20L600.0%208.7%20L600%2028%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") repeat-x;-webkit-mask-size:600px 30px;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%2028%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2028%20L0.0%208.7%20L6.9%2015.6%20L12.1%2015.1%20L15.3%207.3%20L18.9%2020.9%20L22.6%2017.3%20L31.3%2013.1%20L40.2%2021.5%20L44.9%208.1%20L49.7%203.8%20L56.2%2012.7%20L62.5%207.1%20L66.8%2013.7%20L71.6%2014.2%20L76.4%209.0%20L80.9%2015.5%20L89.2%204.9%20L98.0%2013.5%20L105.6%2014.8%20L108.8%2019.8%20L115.3%205.1%20L122.4%2016.4%20L128.2%2011.4%20L134.0%207.1%20L141.2%2023.9%20L149.1%2012.9%20L156.2%2014.3%20L160.2%207.1%20L167.8%2010.5%20L173.1%202.8%20L178.8%2021.9%20L186.7%204.8%20L192.2%2021.9%20L201.0%209.2%20L205.4%2014.7%20L211.9%206.1%20L217.4%2016.2%20L226.1%2015.3%20L232.8%207.0%20L241.2%2010.7%20L249.0%2013.2%20L252.6%207.1%20L256.0%208.9%20L261.1%206.0%20L265.0%2012.5%20L268.1%208.1%20L272.0%2012.3%20L277.2%2021.3%20L286.2%2014.7%20L289.7%2012.2%20L294.3%203.6%20L297.4%207.3%20L301.3%206.5%20L307.5%2010.6%20L314.6%2012.6%20L318.7%207.3%20L326.3%2010.0%20L334.2%2010.5%20L342.0%209.4%20L346.4%2012.4%20L349.6%2011.0%20L354.1%2023.2%20L359.8%2011.9%20L368.5%2010.0%20L372.9%209.7%20L379.6%2010.4%20L385.5%2020.4%20L389.0%2022.4%20L396.7%206.8%20L400.8%205.3%20L408.6%206.0%20L414.0%209.2%20L418.0%208.7%20L426.5%203.5%20L434.4%208.6%20L439.5%208.4%20L442.6%208.5%20L448.8%206.3%20L457.0%204.1%20L461.5%2010.3%20L468.0%2013.5%20L471.8%205.5%20L477.6%2022.3%20L483.1%207.0%20L489.3%206.3%20L494.9%206.1%20L502.7%2014.5%20L510.1%2011.9%20L516.2%2020.1%20L519.8%2010.5%20L524.5%207.1%20L530.8%2011.1%20L536.5%2015.1%20L542.6%2014.1%20L548.8%2022.9%20L556.0%2011.4%20L560.5%2023.0%20L568.6%208.2%20L574.2%2010.3%20L577.7%2020.1%20L586.0%2018.9%20L593.0%2021.9%20L600.0%208.7%20L600%2028%20Z%22%20fill%3D%22%23000%22/%3E%3C/svg%3E") repeat-x;mask-size:600px 30px;
}
.connect-head{margin:0;font-weight:800;font-variation-settings:'wdth' 92;font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.connect-line1,.connect-line2{display:block}
.connect-line2{color:rgba(58,14,24,.62);margin-top:.06em}
.cycle{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .06em 0 .02em;margin:0 -.06em 0 -.02em}
.cycle-word{display:inline-block;font-style:italic;font-weight:700;color:#FFD3C4;transition:transform .24s cubic-bezier(.22,1,.36,1),opacity .2s ease-out}
.cycle-word.is-out{transform:translateY(-70%);opacity:0}
.cycle-word.is-in{transform:translateY(70%);opacity:0;transition:none}
.connect-open{margin:clamp(14px,1.6vw,20px) 0 0;font-size:clamp(.98rem,1.15vw,1.08rem);color:rgba(249,243,231,.82)}
.connect-cols{display:grid;grid-template-columns:1fr auto;gap:32px clamp(32px,6vw,120px);align-items:start;margin-top:clamp(18px,2.2vw,26px)}
.connect-label{margin:0 0 .4em;font-size:.82rem;color:rgba(246,243,232,.72)}
.connect-mail{font-weight:500;font-size:clamp(1rem,1.3vw,1.2rem);letter-spacing:-.02em;color:var(--paper);text-decoration:none;
  background:linear-gradient(#FFD3C4,#FFD3C4) no-repeat 0 100%/0 2px;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.connect-mail:hover,.connect-mail:focus-visible{background-size:100% 2px}
.connect-icons{display:flex;gap:12px}
.connect-icons a{width:40px;height:40px;border-radius:50%;background:var(--paper);color:#5A1F2A;display:grid;place-items:center;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background-color .2s ease-out,color .2s ease-out}
.connect-icons a svg{width:17px;height:17px;display:block}
.connect-icons a:hover,.connect-icons a:focus-visible{background:#3A0E18;color:var(--paper);transform:translateY(-3px)}
.connect-icons a:focus-visible{outline:2px dashed var(--paper);outline-offset:4px}
.connect-foot{
  margin-top:clamp(18px,2vw,26px);border-top:1px solid rgba(246,243,232,.35);padding:12px 0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.connect-credit,.connect-place{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:rgba(246,243,232,.78)}
@media (max-width:840px){
  .connect{padding-top:34px}
  .connect-head{font-size:clamp(1.9rem,8.5vw,2.6rem)}
  .connect-cols{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .connect-foot{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .cycle-word,.connect-mail,.connect-icons a{transition:none}
  .connect-icons a:hover{transform:none}
}

/* ── Paw pointer: ink paw everywhere, coral paw on anything clickable. Mouse/trackpad only, touch never sees it ── */
@media (hover:hover) and (pointer:fine){
  html,html *{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g transform='translate(-1.82 -2.93) scale(1.6) rotate(-35 8 8)' fill='%230A2924' stroke='%23EEF1E6' stroke-width='.6'><ellipse cx='8' cy='10.6' rx='3.6' ry='3'/><ellipse cx='3.6' cy='6.6' rx='1.5' ry='1.9'/><ellipse cx='6.6' cy='4.5' rx='1.5' ry='2'/><ellipse cx='9.8' cy='4.5' rx='1.5' ry='2'/><ellipse cx='12.6' cy='6.8' rx='1.5' ry='1.9'/></g></svg>") 4 4,auto}
  :is(a[href],button:not(:disabled),summary,label[for],select,[role=button],.lamp-pull,.foot-cat):not(.is-wip .xp-stage){cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g transform='translate(-1.82 -2.93) scale(1.6) rotate(-35 8 8)' fill='%23EC473D' stroke='%23EEF1E6' stroke-width='.6'><ellipse cx='8' cy='10.6' rx='3.6' ry='3'/><ellipse cx='3.6' cy='6.6' rx='1.5' ry='1.9'/><ellipse cx='6.6' cy='4.5' rx='1.5' ry='2'/><ellipse cx='9.8' cy='4.5' rx='1.5' ry='2'/><ellipse cx='12.6' cy='6.8' rx='1.5' ry='1.9'/></g></svg>") 4 4,pointer !important}
  input:not([type=checkbox],[type=radio],[type=range]),textarea,[contenteditable=true]{cursor:text !important}
}