/* Portfolio (/work): jarrydhennequin.com in the Jennifer Allen / Cathy Dolle style.
   Site identity (Helvetica Neue Light, accent, dark default) with JA restraint:
   one small size, uppercase chrome, hierarchy by colour only. */
:root{
  --bg:#fff; --text:#000; --muted:#6b7280; --faint:#c9cbcc;
  --surface:#f3f4f6; --border:#e5e7eb; --accent:#ff2d0a;
  --pad:clamp(16px,2.4vw,36px);
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
[data-theme="dark"]{
  --bg:#0a0a0a; --text:#fff; --muted:#9ca3af; --faint:#3a3a3a;
  --surface:#1a1a1a; --border:#2a2a2a;
}
*,*::before,*::after{box-sizing:border-box; font-weight:300}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font:300 clamp(13px,.95vw,15px)/1.45 var(--sans); -webkit-font-smoothing:antialiased; transition:background-color .4s ease, color .4s ease}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,ul{margin:0; font:inherit}
ul{list-style:none; padding:0}
.upper{text-transform:uppercase}
.muted{color:var(--muted)}

/* Top bar: four columns, as JA */
.top{position:fixed; top:0; left:0; right:0; z-index:5; display:grid; grid-template-columns:1fr 1fr 1fr 1fr; align-items:center; padding:var(--pad); text-transform:uppercase; pointer-events:none}
.top > *{pointer-events:auto}
.top > :nth-child(3){justify-self:end}
.top .end{justify-self:end; display:flex; align-items:center; gap:clamp(16px,2vw,32px)}
.top a:hover,.bottom a:hover{color:var(--muted)}

/* Theme toggle: the site's pill, scaled to the chrome */
.theme-toggle{all:unset; cursor:pointer; display:inline-grid; place-items:center; width:1.9em; height:1.9em; border-radius:9999px; box-shadow:inset 0 0 0 1px var(--border); transition:box-shadow .25s ease}
.theme-toggle:hover{box-shadow:inset 0 0 0 1px var(--muted)}
.theme-toggle svg{width:1.1em; height:1.1em}
.theme-toggle .moon{display:none}
[data-theme="light"] .theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .moon{display:block}


/* Pill buttons, the only rounded things besides the toggle */
.btn{display:inline-flex; align-items:center; gap:.5em; padding:.55em 1em; border-radius:9999px; box-shadow:inset 0 0 0 1px var(--border); text-transform:uppercase; transition:box-shadow .25s ease}
.btn:hover{box-shadow:inset 0 0 0 1px var(--text)}
.btn svg,.arrow{width:1em; height:1em}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}

@media (max-width:860px){
  .top{grid-template-columns:1fr auto auto; gap:18px}
  .top > :nth-child(2){display:none}
}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none} body{transition:none} }