/* joapo.com — black ground, Work Sans, one page.
   Type is four uses and no more:
     600 semibold     nav, labels
     500 medium       headers and subs
     400 regular italic lists and secondary lines
     300 light        long-form paragraphs
   Colour is the closed Joapo set. The four accents appear in exactly ONE place
   on this site — the nav mark's cycle. Everything else is white on black. */

:root{
  --ink:#000;
  --paper:#fff;
  --blue:#1B4FD8;
  --red:#B92432;
  --green:#1E7B5A;
  --yellow:#F2C94D;

  --rule:rgba(255,255,255,.22);

  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
  --sec:clamp(76px,10vw,140px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:92px;
  background:var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:2px}

/* ------------------------------------------------------------------- nav */

.nav{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  display:flex; align-items:center;
  gap:clamp(24px,5vw,56px);
  padding:20px var(--pad) 16px;
}

.mark{display:inline-flex;line-height:0;text-decoration:none}
.mark-svg{display:block;line-height:0}
/* Kit minimum for the wordmark is 120px. Do not go below it. */
.mark svg{
  display:block;
  width:clamp(120px,10vw,140px);
  height:auto;
  color:var(--paper);
  animation:markCycle 5s step-end infinite;
}

/* One accent per second, looping. Starts white so the first impression is the
   mark as drawn; the four accents are the locked Joapo set and nothing else. */
@keyframes markCycle{
  0%,   19.99% { color:var(--paper) }
  20%,  39.99% { color:var(--blue) }
  40%,  59.99% { color:var(--green) }
  60%,  79.99% { color:var(--yellow) }
  80%,  100%   { color:var(--red) }
}

.nav-links{display:flex;gap:clamp(18px,3vw,36px);font-weight:600;font-size:.95rem}
.nav-links a{text-decoration:none;opacity:.92;transition:opacity .2s}
.nav-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ------------------------------------------------------------------ hero */

.hero{padding:clamp(28px,5vw,64px) var(--pad) var(--sec)}

.hero-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}

.lede{
  font-weight:500;
  font-size:clamp(1.16rem,.95rem + .62vw,1.66rem);
  line-height:1.44;
  letter-spacing:-.004em;
  margin:0 0 1.05em;
  max-width:17.5em;
}
h1.lede{margin-bottom:1.15em}

.u{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.u:hover{text-decoration-thickness:2px}

.collab{margin-top:clamp(34px,5vw,58px);padding-left:1em}
.label{font-weight:600;font-size:1rem;line-height:1.4;margin:0 0 .95em}
.collab ul{
  margin:0; padding:0 0 0 1.75em; list-style:none;
  font-weight:400; font-style:italic;
  font-size:1rem; line-height:1.7;
  color:var(--paper);
}

/* ------------------------------------------------------------------ dial
   The stage is a square. app.js writes --x/--y (node centre, relative to the
   stage centre) and --lx/--ly (label centre, relative to the node) onto each
   .area every frame. Nothing rotates, so no text needs a counter-transform and
   the labels stay upright by construction. */

.dial{
  --stage:clamp(300px,34vw,420px);
  --dot:clamp(28px,3vw,34px);
  padding-inline:clamp(24px,6vw,96px);
}

.stage{position:relative;width:var(--stage);height:var(--stage);margin:0 auto}

.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring circle{
  fill:none;
  stroke:rgba(255,255,255,.34);
  stroke-width:.32;
  stroke-dasharray:.55 2.4;
  stroke-linecap:round;
  transition:stroke .3s;
}
.dial.is-open .ring circle{stroke:rgba(255,255,255,.5)}

/* A faint halo behind the ring once something is open — the screenshot's
   "lit up" state, done with light rather than another border. */
.stage::after{
  content:"";
  position:absolute; inset:-6%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10) 55%,transparent 72%);
  opacity:0; transition:opacity .35s;
  pointer-events:none;
}
.dial.is-open .stage::after{opacity:1}

.stage-center{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  margin:0; font-weight:500; font-size:1rem;
  transition:opacity .28s;
}
.dial.is-open .stage-center{opacity:0}

.area{position:static}

.area-btn{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translate(var(--x,0px),var(--y,0px));
  width:var(--dot); height:var(--dot);
  padding:0; border:0; background:none;
  cursor:pointer; color:inherit;
  font:inherit;
}

.dot{
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--ink);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 0 20px 5px rgba(255,255,255,.28), 0 0 7px 1px rgba(255,255,255,.42);
  transition:background .28s, box-shadow .28s, border-color .28s, transform .28s;
  display:grid; place-items:center;
}
.dot-icon{display:block;width:52%;height:52%;color:var(--paper);transition:color .28s}
.dot-icon svg{width:100%;height:100%;display:block;fill:currentColor}

.area-btn:hover .dot,
.area-btn:focus-visible .dot{
  box-shadow:0 0 28px 9px rgba(255,255,255,.46), 0 0 9px 2px rgba(255,255,255,.66);
}

/* Open: the chosen node is white and lit, the other three drop back to small
   outlines so the panel is the only thing with weight. */
.dial.is-open .area:not(.is-active) .dot{
  background:transparent;
  box-shadow:none;
  border-color:rgba(255,255,255,.45);
  transform:scale(.78);
}
.area.is-active .dot{
  background:var(--paper);
  border-color:var(--paper);
  box-shadow:0 0 32px 10px rgba(255,255,255,.5), 0 0 10px 2px rgba(255,255,255,.8);
}
.area.is-active .dot-icon{color:var(--ink)}

.area-label{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) translate(var(--lx,0px),var(--ly,0px));
  white-space:nowrap;
  font-weight:600; font-size:.92rem; line-height:1;
  color:var(--paper);
}
.sign{margin-left:.35em}

.area-body{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--stage) * .58);
  background:var(--ink);
  border:1px solid rgba(255,255,255,.5);
  border-radius:14px;
  padding:15px 17px 17px;
  text-align:left;
}
.area.is-active .area-body{animation:panelIn .3s ease both}
@keyframes panelIn{
  from{opacity:0;transform:translate(-50%,-50%) scale(.97)}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.area-body h3{margin:0 0 .55em;font-weight:600;font-size:1rem;line-height:1.3}
.area-body ul{
  margin:0; padding:0; list-style:none;
  font-weight:400; font-style:italic;
  font-size:.95rem; line-height:1.66;
  color:var(--paper);
}

/* ----------------------------------------------------------------- about */

.about{padding:0 var(--pad) var(--sec)}
.about-inner{
  max-width:var(--wrap); margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(36px,7vw,92px);
  align-items:start;
}
.about-copy p{
  font-weight:300;
  font-size:clamp(1rem,.92rem + .28vw,1.15rem);
  line-height:1.66;
  margin:0 0 1.3em;
  max-width:36em;
}

.cue{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.15em; height:1.15em;
  margin-left:.3em; vertical-align:-.2em;
  color:var(--paper); text-decoration:none;
  animation:cuePulse 2.6s ease-in-out infinite;
}
.cue svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@keyframes cuePulse{0%,100%{opacity:.3}50%{opacity:1}}

.about-figure{
  margin:0;
  display:flex; flex-direction:column; align-items:flex-end;
  max-width:340px; margin-left:auto;
}
.about-figure img{width:100%}
.about-figure figcaption{margin-top:12px}
.li{display:inline-flex;color:var(--paper)}
.li svg{width:20px;height:20px;fill:currentColor;display:block}

/* -------------------------------------------------------------- projects */

.projects{padding:0 var(--pad) var(--sec)}
.projects .wrap{max-width:var(--wrap);margin:0 auto}
.soon{font-weight:400;font-style:italic;color:var(--paper);margin:.6em 0 0;font-size:.95rem}

/* ------------------------------------------------------------- closer */

.closer{padding:0 var(--pad) var(--sec)}
.closer .wrap{max-width:var(--wrap);margin:0 auto}
.closer .lede{margin-bottom:.85em}
.closer .lede:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- footer */

.ft{padding:0 var(--pad) clamp(34px,5vw,56px)}
.ft-inner{
  max-width:var(--wrap); margin:0 auto;
  border-top:1px solid var(--rule);
  padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px 28px;
  justify-content:space-between; align-items:baseline;
  font-weight:400; font-size:.82rem; color:var(--paper);
}
.ft-legal{margin:0}
.ft-links{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.ft a{text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:3px}

/* --------------------------------------------------------------- 404 */

.notfound{padding:clamp(60px,12vw,140px) var(--pad) var(--sec)}
.notfound .wrap{max-width:var(--wrap);margin:0 auto}

/* ================================================================ mobile
   Below 760px the circle is dropped entirely: the four areas become stacked
   rows that expand in place. Same markup, no duplicated copy. */

@media (max-width:760px){
  .hero-inner{grid-template-columns:1fr;align-items:start;gap:clamp(44px,9vw,64px)}
  .lede{max-width:none}

  .dial{padding-inline:0}
  .stage{position:static;width:auto;height:auto}
  .ring,.stage-center,.stage::after{display:none}

  .area{border-top:1px solid var(--rule)}
  .area:last-of-type{border-bottom:1px solid var(--rule)}

  .area-btn{
    position:static; transform:none;
    width:100%; height:auto;
    display:flex; align-items:center; gap:14px;
    padding:16px 2px; text-align:left;
  }
  .dot{
    position:static; flex:0 0 auto;
    width:10px; height:10px;
    box-shadow:none!important; transform:none!important;
    border-color:rgba(255,255,255,.6);
  }
  .dot-icon{display:none}
  .area.is-active .dot{background:var(--paper);border-color:var(--paper)}

  .area-label{
    position:static; transform:none;
    flex:1 1 auto;
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:1.02rem;
  }
  .sign{margin-left:0}

  .area-body{
    position:static; transform:none;
    width:auto; border:0; border-radius:0;
    padding:0 2px 18px 24px;
    animation:none!important;
  }
  .area-body h3{display:none}
  .area-body ul{font-size:1rem;line-height:1.8}

  .about-inner{grid-template-columns:1fr;gap:36px}
  .about-figure{max-width:none;width:78%;margin-left:0;align-items:flex-end}
}

@media (max-width:420px){
  .nav{gap:18px;padding-inline:20px}
  .nav-links{font-size:.9rem;gap:16px}
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark svg{animation:none;color:var(--paper)}
  .cue{animation:none;opacity:.85}
  .area.is-active .area-body{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}