/* ============================================================
   JAMES DODDS — shared stylesheet (2026)
   Link this from every page:
   <link rel="stylesheet" href="/assets/css/jd.css">
   Page-specific layout stays in each page's own <style> block.
   ============================================================ */

:root{
  --ink: #111318;
  --ink-soft: #737984;
  --paper: #F7F8FA;
  --band: #E9EBEF;
  --signal: #4d88ff;
  --rule: #D6D9DF;

  --shell: clamp(1.25rem, 5vw, 5rem);
  --gap: clamp(1.5rem, 3vw, 3rem);

--sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
--serif: 'Cormorant Garamond', Georgia, serif;

  --t-xs:.78rem;
  --t-sm:.94rem;
  --t-base:clamp(1rem,.96rem + .25vw,1.12rem);
  --t-lg:clamp(1.25rem,1.1rem + .7vw,1.6rem);
  --t-xl:clamp(1.8rem,1.3rem + 2.2vw,3rem);
  --t-2xl:clamp(2.4rem,1.5rem + 4vw,4.6rem);
  --t-mega:clamp(3.2rem,1rem + 12vw,11rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-base);
  line-height:1.6;
  font-variation-settings:'wdth' 100,'wght' 400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-.02em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:.75rem 1rem;z-index:999}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.shell{padding-inline:var(--shell)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------------- Header ---------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,248,.92);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--rule);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{height:26px;width:auto}
.brand b{font-size:.95rem;font-variation-settings:'wdth' 108,'wght' 700;letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{
  text-decoration:none;font-size:var(--t-sm);color:var(--ink-soft);
  font-variation-settings:'wght' 500;position:relative;padding-block:.35rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:1.5px;
  background:var(--signal);transition:right .3s ease;
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}
.btn-resume{
  display:inline-block;text-decoration:none;font-size:var(--t-sm);
  font-variation-settings:'wght' 600;
  border:1.5px solid var(--ink);padding:.45rem 1rem;border-radius:999px;
  transition:background .25s ease,color .25s ease;
}
.btn-resume:hover{background:var(--paper);color:var(--ink)}
.btn-resume::after{display:none}
.menu-btn{display:none;background:none;border:0;font:inherit;cursor:pointer;padding:.5rem;font-variation-settings:'wght' 600}

@media (max-width:840px){
  .nav{
    position:fixed;inset:64px 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:.5rem var(--shell) 1.5rem;
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .nav[data-open="true"]{transform:translateY(0)}
  .nav a{font-size:1.4rem;color:var(--ink);padding-block:.7rem;width:100%;border-bottom:1px solid var(--rule)}
  .nav .btn-resume{margin-top:1rem;border-bottom:1.5px solid var(--ink)}
  .menu-btn{display:block}
}

/* ---------------- Shared components ---------------- */
.cta{
  display:inline-block;text-decoration:none;font-size:var(--t-sm);
  font-variation-settings:'wght' 600;
  padding:.7rem 1.4rem;border-radius:999px;border:1.5px solid var(--ink);
  transition:transform .2s ease,background .25s ease,color .25s ease;
}
.cta-solid{background:var(--ink);color:var(--paper)}
.cta-solid:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.cta-ghost:hover{background:var(--ink);color:var(--paper)}
.cta:active{transform:translateY(1px)}

.link{
  display:inline-block;text-decoration:none;font-size:var(--t-sm);
  font-variation-settings:'wght' 700;letter-spacing:.02em;
  border-bottom:2px solid var(--signal);padding-bottom:2px;
  transition:border-color .25s ease;
}
.link:hover{border-color:var(--ink)}

.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  font-size:var(--t-xs);border:1px solid var(--rule);border-radius:999px;
  padding:.2rem .65rem;color:var(--ink-soft);font-variation-settings:'wght' 500;
}
.tag-client{border-color:var(--ink);color:var(--ink);background:var(--signal)}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head h2,.h-sec{
  font-size:var(--t-xl);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;letter-spacing:-.03em;
}
.sec-head p{color:var(--ink-soft);font-size:var(--t-sm);max-width:38ch}

/* ---------------- Ticker ---------------- */
.ticker{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  overflow:hidden;padding-block:.7rem;background:var(--paper);
}
.ticker-track{display:flex;width:max-content;animation:jd-slide 38s linear infinite}
.ticker-track li{
  padding-inline:1.1rem;white-space:nowrap;
  font-size:var(--t-sm);font-variation-settings:'wdth' 92,'wght' 600;
  letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:center;gap:1.1rem;
}
.ticker-track li::after{content:"";width:5px;height:5px;background:var(--signal);border-radius:50%}
@keyframes jd-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- Forms ---------------- */
form{display:grid;gap:.9rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
label{display:block;font-size:var(--t-xs);color:var(--ink-soft);margin-bottom:.3rem;font-variation-settings:'wght' 600}
input,textarea{
  width:100%;font:inherit;font-size:var(--t-sm);color:var(--ink);
  background:transparent;border:1px solid var(--rule);border-radius:2px;
  padding:.7rem .8rem;transition:border-color .2s ease;
}
input:focus,textarea:focus{border-color:var(--ink)}
textarea{min-height:130px;resize:vertical}
button[type=submit]{
  justify-self:start;font:inherit;font-size:var(--t-sm);font-variation-settings:'wght' 700;
  background:var(--ink);color:var(--paper);border:0;border-radius:999px;
  padding:.75rem 1.8rem;cursor:pointer;transition:background .25s ease,color .25s ease;
}
button[type=submit]:hover{background:var(--signal);color:var(--ink)}

/* ---------------- Footer ---------------- */
.site-foot{border-top:1px solid var(--rule);padding-block:1.5rem;font-size:var(--t-xs);color:var(--ink-soft)}
.foot-in{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------------- Motion ---------------- */
.js .reveal-line{clip-path:inset(0 0 105% 0)}
.js .reveal-fade{opacity:0}
.js img[data-reveal]{clip-path:inset(0 0 0 100%)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker-track{animation:none}
  .js .reveal-line,.js .reveal-fade,.js img[data-reveal]{clip-path:none!important;opacity:1!important}
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 500ms cubic-bezier(0.76, 0, 0.24, 1) both slide-out;
}
::view-transition-new(root) {
  animation: 500ms cubic-bezier(0.76, 0, 0.24, 1) both slide-in;
}
@keyframes slide-out {
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slide-in {
  from { transform: translateX(100%); }
}