/* harrycj.com — shared styles. Tokens from the brand book: basalt, ink, slate, paper, one verdigris accent. */
:root{
  --basalt:#16202B; --basalt-2:#1E2A37; --ink:#15191F; --slate:#5B6672; --rule:#DCE1E6; --paper:#F5F7F8; --white:#FFFFFF;
  --verdigris:#3F9A86; --verdigris-soft:#CFE7E0; --on-dark:#E9EEF1; --on-dark-2:#9AA7B3;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --wrap:1240px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--verdigris); outline-offset:3px}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left, 0px)); padding-right:max(20px, env(safe-area-inset-right, 0px))}
@media (min-width:760px){ .wrap{padding-left:max(44px, env(safe-area-inset-left, 0px)); padding-right:max(44px, env(safe-area-inset-right, 0px))} }

/* work-in-progress strip: honest about a site under construction */

/* nav: always says where you are */
.nav{position:fixed; left:0; right:0; top:0; padding-top:env(safe-area-inset-top, 0px); z-index:50; background:rgba(245,247,248,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); transition:background-color .35s, border-color .35s, color .35s, backdrop-filter .35s}
/* over the map the nav has no bar: white type sitting straight on the contours, turning solid once you scroll past */
.nav.over{background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--white)}
.nav.over ul a{color:rgba(255,255,255,.72)}
.nav.over ul a:hover{color:var(--white)}
.nav.over .menu-btn{color:var(--white)}
.nav.over .progress{opacity:0}
.nav.over.open{background:var(--basalt); color:var(--white)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px}
.brand{font-weight:700; text-decoration:none; font-size:16px; letter-spacing:-.01em}
.brand{transition:opacity .35s}
/* the name only appears in the bar once the hero's big name has scrolled away */
.nav.over .brand{opacity:0; pointer-events:none}
.nav ul{display:flex; gap:clamp(14px,2.6vw,32px); list-style:none; margin:0; padding:0}
.nav ul a{text-decoration:none; font-size:15px; font-weight:500; color:var(--slate); position:relative; padding:6px 0}
.nav ul a:hover, .nav ul a.active{color:var(--ink)}
.nav ul a.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--verdigris)}
.progress{transition:opacity .35s; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--verdigris); transform-origin:0 50%; transform:scaleX(0)}
.menu-btn{display:none; background:none; border:0; font:600 15px var(--sans); color:var(--ink); cursor:pointer; padding:8px 0}
@media (max-width:720px){
  .menu-btn{display:block}
  .nav ul{position:absolute; top:62px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--rule); padding:6px max(20px, env(safe-area-inset-left, 0px)) 14px; display:none}
  .nav.open ul{display:flex}
  .nav.over ul{background:var(--basalt); border-bottom-color:rgba(255,255,255,.12)}
  .nav ul a{display:block; padding:12px 0; font-size:17px}
  .nav ul a.active::after{display:none}
}

/* hero */
.hero{position:relative; background:radial-gradient(120% 90% at 70% 30%, var(--basalt-2), var(--basalt) 70%); color:var(--white); overflow:hidden}
.hero canvas{position:absolute; inset:0; width:100%; height:100%}
.hero::before{content:""; position:absolute; left:0; right:0; top:0; height:90px; z-index:1; pointer-events:none; background:linear-gradient(rgba(10,16,22,.55), rgba(10,16,22,0))}
.hero .wrap{z-index:2}
.hero .wrap{position:relative; padding-block:clamp(110px,18vh,190px) clamp(56px,9vh,96px)}
.hero h1{margin:0; font-weight:800; font-size:clamp(46px,9.4vw,140px); line-height:1; letter-spacing:-.035em}
.hero h1 .first{display:block}
/* outlined surname: a solid basalt fill painted over the stroke hides the font's internal overlaps,
   and looser tracking keeps neighbouring letters from colliding */
.hero h1 .last{display:block; width:6.849em; max-width:100%; height:auto; margin-top:.1em; overflow:visible}
/* the surname is one merged outline (no internal overlaps), so it can be hollow: a smoky basalt fill lets the map show faintly through */
.hero h1 .last path{fill:rgba(22,32,43,.6); stroke:rgba(255,255,255,.92); stroke-width:clamp(1.3px,.12vw,2px); vector-effect:non-scaling-stroke; stroke-linejoin:round}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.hero p{font-family:var(--serif); font-size:clamp(15px,4.1vw,27px); white-space:nowrap; line-height:1.35; margin:28px 0 0; color:rgba(255,255,255,.88)}
@media (min-width:760px){ .hero p{font-size:clamp(18px,2.1vw,27px)} }

/* sections */
section.block{padding-block:clamp(72px,10vw,128px); border-top:1px solid var(--rule)}
section.block:first-of-type{border-top:0}
.grid{display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,5vw,72px)}
@media (max-width:860px){ .grid{grid-template-columns:minmax(0,1fr)} }
.label{font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.15; color:var(--ink); margin:0; position:sticky; top:96px; align-self:start}
.label b{display:block; color:var(--ink); font-size:28px; font-weight:700; letter-spacing:-.02em; margin-top:4px}
@media (max-width:860px){ .label{position:static} }
.prose p{font-family:var(--serif); font-size:clamp(20px,1.9vw,23px); line-height:1.55; margin:0 0 1em; max-width:62ch}
.prose p.lead{font-size:clamp(25px,2.7vw,34px); line-height:1.25; letter-spacing:-.01em}

/* social icons */
.icons{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.icons a{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--rule); border-radius:50%; text-decoration:none; font-size:18px; color:var(--ink); background:var(--white); transition:color .2s, border-color .2s, transform .2s}
.icons a:hover{color:var(--verdigris); border-color:var(--verdigris); transform:translateY(-2px)}
.on-dark .icons a{background:transparent; color:var(--white); border-color:rgba(255,255,255,.25)}

/* project list */
.projects{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.projects li{display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:22px; padding:26px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.projects .yr{color:var(--slate); font-weight:600; font-variant-numeric:tabular-nums}
.projects h3{margin:0 0 6px; font-size:clamp(21px,2.1vw,26px); letter-spacing:-.015em}
.projects h3 a{text-decoration:none}
.projects h3 a:hover{color:var(--verdigris)}
.projects p{margin:0; color:var(--slate); max-width:64ch}
.go{font-size:14px; font-weight:600; text-decoration:none; border-bottom:1.5px solid var(--verdigris); white-space:nowrap}
.go:hover{color:var(--verdigris)}
.projects .soon{font-size:14px; color:var(--slate); white-space:nowrap}
@media (max-width:640px){ .projects li{grid-template-columns:minmax(0,1fr); gap:6px} }

/* writing: empty state for now */
.empty{border:1px dashed #BFC7CF; padding:clamp(26px,4vw,40px); background:var(--white)}
.empty p{font-family:var(--serif); font-size:clamp(20px,2vw,23px); margin:0 0 6px}
.empty small{color:var(--slate); font-size:15px}

/* path */
.path{list-style:none; margin:0; padding:0; position:relative}
.path::before{content:""; position:absolute; left:7px; top:10px; bottom:10px; width:1px; background:var(--rule)}
.path li{position:relative; padding:0 0 40px 42px}
.path li:last-child{padding-bottom:0}
.path li::before{content:""; position:absolute; left:0; top:7px; width:15px; height:15px; border-radius:50%; background:var(--paper); border:1.5px solid var(--ink)}
.path li.here::before{background:var(--verdigris); border-color:var(--verdigris)}
.path .when{font-size:15px; color:var(--slate)}
.path h3{margin:2px 0 4px; font-size:21px; letter-spacing:-.01em}
.path p{margin:0; color:var(--slate); max-width:62ch}

/* footer */
footer.site{background:var(--basalt); color:var(--white); padding-block:clamp(64px,9vw,110px) 36px}
footer.site h2{font-size:clamp(34px,5.5vw,72px); line-height:.95; letter-spacing:-.035em; margin:0 0 8px; font-weight:800; max-width:14ch}
footer.site .fine{margin-top:72px; font-size:14px; color:var(--on-dark-2); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
footer.site .fine a{color:var(--on-dark-2)}

/* case study pages */
.cs-head{background:var(--basalt); color:var(--white); padding-block:clamp(64px,9vw,110px) clamp(40px,6vw,64px)}
.cs-head .back{color:var(--on-dark-2); text-decoration:none; font-size:14px}
.cs-head .back:hover{color:var(--white)}
.cs-head h1{margin:18px 0 10px; font-size:clamp(40px,6.5vw,84px); line-height:.95; letter-spacing:-.04em; font-weight:800}
.cs-head p{font-family:var(--serif); font-size:clamp(19px,2vw,24px); color:var(--on-dark); max-width:46ch; margin:0}
.facts{display:flex; flex-wrap:wrap; gap:12px 36px; margin-top:32px; font-size:14px; color:var(--on-dark-2)}
.facts b{display:block; color:var(--white); font-weight:600; font-size:15px}
.cs-body{padding-block:clamp(56px,8vw,96px)}
.cs-body .grid + .grid{margin-top:clamp(48px,7vw,80px)}
.todo{border-left:3px solid var(--verdigris); background:var(--white); padding:16px 20px; color:var(--slate); font-size:15px; max-width:62ch}
.todo b{color:var(--ink)}
.figure-slot{aspect-ratio:16/9; max-width:100%; border:1px dashed #BFC7CF; background:var(--white); display:grid; place-items:center; color:var(--slate); font-size:14px; margin-top:20px}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .icons a{transition:none} }

/* inline links to companies: quiet, with a verdigris underline */
.prose a, .path h3 a, .projects p a{color:inherit; text-decoration:underline; text-decoration-color:var(--verdigris); text-decoration-thickness:1.5px; text-underline-offset:3px; transition:color .2s}
.prose a:hover, .path h3 a:hover, .projects p a:hover{color:var(--verdigris)}