/* spider-map-02 · project presentation (draft template, text only for now).
   Project pages are white with black Helvetica type; the map stays dark. */
[hidden]{display:none!important}
#project{--paper:#ffffff; --ink:#000000; --soft:#333333; --muted:#6b6b6b; --rule:#e2e2e2;
  position:fixed;inset:0;z-index:5;overflow-y:auto;background:var(--paper);color:var(--ink);
  font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;
  clip-path:circle(0px at var(--ox,50%) var(--oy,50%));
  transition:clip-path .75s cubic-bezier(.7,0,.2,1)}
#project.open{clip-path:circle(150vmax at var(--ox,50%) var(--oy,50%))}
@media (prefers-reduced-motion: reduce){ #project{transition:none} }
#project .close{position:fixed;z-index:2;top:calc(14px + env(safe-area-inset-top, 0px));right:calc(18px + env(safe-area-inset-right, 0px));
  width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  font:20px/1 Helvetica,"Helvetica Neue",Arial,sans-serif;cursor:pointer}
#project .close:hover,#project .close:focus-visible{border-color:var(--ink);outline:none}

/* one centred column of type, held in the middle of the screen when short */
#project article{min-height:100%;max-width:880px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;gap:48px;
  padding:88px max(40px, env(safe-area-inset-right, 0px)) 72px max(40px, env(safe-area-inset-left, 0px))}
#project header{display:flex;flex-direction:column;gap:16px}
#project .wip{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
#project h2{font-size:clamp(40px, 7vw, 88px);font-weight:700;line-height:1;letter-spacing:normal;text-transform:uppercase;text-wrap:balance}
/* the red dot sits on the first line, even when a long title wraps */
#project h2::before{content:"";display:inline-block;width:.16em;height:.16em;margin-right:.32em;vertical-align:.24em;border-radius:50%;background:#ff4a45}
#project .sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.7}
#project .award{align-self:start;border:1px solid var(--ink);padding:7px 12px;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
#project .body{display:flex;flex-direction:column;gap:20px}
#project .hook{font-size:clamp(20px, 2.6vw, 28px);line-height:1.4;max-width:38ch;color:var(--ink);text-wrap:balance}
#project p{font-size:15px;line-height:1.75;color:var(--soft);max-width:62ch}
#project dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:20px 28px;border-top:1px solid var(--rule);padding-top:22px}
#project dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#project dd{font-size:13px;line-height:1.5}
/* facts that hold lists (the profile) get wider columns, one item per line */
#project dl.long{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px 36px}
#project strong{font-weight:700;color:var(--ink)}
#project dd span{display:block}
#project dd span+span{margin-top:6px}
#project .links{display:flex;flex-wrap:wrap;gap:12px}
#project .links a{color:var(--ink);text-decoration:none;border:1px solid var(--rule);padding:9px 14px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:border-color .2s}
#project .links a:hover,#project .links a:focus-visible{border-color:var(--ink);outline:none}
@media (max-width:800px){
  #project article{gap:36px;padding:80px max(20px, env(safe-area-inset-right, 0px)) 48px max(20px, env(safe-area-inset-left, 0px))}
  #project dl{grid-template-columns:1fr 1fr}
}