/* ==========================================================================
   SIGNAL — drjaywiles.com
   Dark instrument ground. Two trace accents, pulse and breath, the way a
   physiological chart carries two lines. Monospace for anything measured.
   Type is a neutral grotesque; the stack below prefers what the visitor
   already has rather than shipping a webfont the page has to wait for.
   ========================================================================== */

:root{
  /* ground */
  --ink-0:#05090A;      /* page */
  --ink-1:#0A1114;      /* raised band */
  --ink-2:#0E181B;      /* card */
  /* type */
  --bone:#DDE7E7;       /* primary */
  --bone-2:#9AACAF;     /* body copy */
  --dim:#6C8083;        /* labels, tertiary */
  /* traces */
  --pulse:#D9482B;
  --pulse-hi:#F0603C;
  --breath:#6FA6AE;
  /* structure */
  --rule:rgba(111,166,174,.16);
  --rule-2:rgba(111,166,174,.30);

  --f:"Helvetica Neue",Helvetica,"Segoe UI",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:clamp(1.25rem,5vw,4rem);
  --maxw:1240px;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0; background:var(--ink-0); color:var(--bone);
  font-family:var(--f); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.03;}
h1{font-size:clamp(2.1rem,4.6vw,3.9rem);}
h2{font-size:clamp(1.6rem,3.6vw,2.85rem); line-height:1.08; text-wrap:balance;}
h3{font-size:1.15rem; letter-spacing:-.015em; line-height:1.25;}
p{margin:0; line-height:1.7;}
a{color:inherit; text-decoration:none;}

:focus-visible{outline:2px solid var(--breath); outline-offset:3px;}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--pulse); color:#0A0405; padding:.75rem 1rem; font-weight:700;
}
.skip:focus{left:.5rem; top:.5rem;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}

/* --- shared atoms -------------------------------------------------------- */
.mono{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;}
.lab{color:var(--dim);}
.lab-b{color:var(--breath);}
.body{color:var(--bone-2); font-size:1rem;}
.sm{font-size:.92rem;}

.btn{
  display:inline-block; padding:1rem 1.4rem; border-radius:2px;
  font-size:.88rem; font-weight:700; letter-spacing:-.005em; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; font-family:var(--f);
  transition:background .18s,border-color .18s,color .18s;
}
.btn-1{background:var(--pulse); color:#0A0405; border-color:var(--pulse);}
.btn-1:hover{background:var(--pulse-hi); border-color:var(--pulse-hi);}
.btn-1[disabled]{opacity:.55; cursor:default;}
.btn-2{border-color:var(--rule-2); color:var(--bone);}
.btn-2:hover{border-color:var(--breath); color:var(--breath);}
.btn-3{
  border-color:var(--rule-2); color:var(--pulse); font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.65rem .95rem; font-weight:400;
}
.btn-3:hover{border-color:var(--pulse); background:rgba(217,72,43,.08);}

.sec{border-top:1px solid var(--rule);}
.sec-in{padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(3rem,7vw,6rem);}
.sec-head{display:flex; gap:1rem; align-items:baseline; margin-bottom:clamp(1.5rem,3.5vw,2.75rem); flex-wrap:wrap;}
.sec-head h2{flex:1 1 22rem; min-width:0;}

/* --- nav ----------------------------------------------------------------- */
.nav{border-bottom:1px solid var(--rule); background:var(--ink-0); position:relative; z-index:20;}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-top:1.15rem; padding-bottom:1.15rem;}
.brand{font-weight:700; font-size:1rem; letter-spacing:-.01em; white-space:nowrap;}
.brand i{color:var(--pulse); font-style:normal;}
.nav-links{display:flex; gap:1.7rem;}
.nav-links a{color:var(--dim); transition:color .18s;}
.nav-links a:hover{color:var(--bone);}
.nav-toggle{display:none;}

/* --- hero ---------------------------------------------------------------- */
.hero{position:relative; overflow:hidden;}
.hero-in{
  position:relative; z-index:2;
  padding-top:clamp(2.75rem,7vw,5.5rem); padding-bottom:clamp(6rem,15vw,11.5rem);
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
}
.hero-copy{max-width:min(100%,40rem);}
.hero-figure{position:relative; margin:0;}
.hero-figure img{display:block; width:100%; height:auto; border:1px solid var(--rule);}
/* fade the photograph into the ground so it sits in the page, not on it */
.hero-figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, transparent 55%, rgba(5,9,10,.92) 97%),
    linear-gradient(to right, rgba(5,9,10,.55), transparent 38%);
}
.hero h1{margin:1.5rem 0 1.6rem;}
.hero h1 em{font-style:normal; color:var(--pulse);}
.hero .body{font-size:clamp(1rem,1.5vw,1.15rem); max-width:46ch; margin-bottom:2.4rem;}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;}
.cta-note{color:var(--dim); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;}
.hero-note{margin-top:1.25rem;}
#trace{position:absolute; inset:auto 0 0 0; width:100%; height:18%; opacity:.6; pointer-events:none; z-index:1;}

/* --- press strip --------------------------------------------------------- */
.press{display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.75rem); padding:2rem 0; border-top:1px solid var(--rule); flex-wrap:wrap;}
.press-lab{flex:0 0 auto; white-space:nowrap;}
.press-marks{flex:1 1 20rem; display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1.25rem,3.2vw,3rem); justify-content:space-between;}
.press-marks img{height:clamp(20px,2.6vw,32px); width:auto; opacity:.70; transition:opacity .2s;}
.press-marks img:hover{opacity:1;}
/* the two mastheads are set solid, so they read small at a shared height */
.press-marks img[alt="The New York Times"],
.press-marks img[alt="The Washington Post"]{height:clamp(30px,3.9vw,48px);}

/* --- readout strip ------------------------------------------------------- */
.readout{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); border-top:1px solid var(--rule);}
.cell{padding:1.6rem 1.4rem 1.6rem 0; border-right:1px solid var(--rule);}
.cell:last-child{border-right:0;}
.cell b{display:block; font-size:1.6rem; font-weight:700; letter-spacing:-.03em; margin-bottom:.45rem; font-variant-numeric:tabular-nums;}
.cell span{display:block; color:var(--dim); line-height:1.55;}

/* --- argument ------------------------------------------------------------ */
.argument{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.75rem,5vw,4.5rem); align-items:start;}
.stack{display:flex; flex-direction:column; gap:1.1rem;}
.quote{border-left:2px solid var(--pulse); padding:.3rem 0 .3rem 1.3rem; font-size:clamp(1.1rem,2.2vw,1.5rem); line-height:1.4; letter-spacing:-.02em; color:var(--bone);}

/* --- services ------------------------------------------------------------ */
.svcs{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--rule);}
.svc{background:var(--ink-0); padding:clamp(1.35rem,3vw,2.2rem); display:flex; flex-direction:column; gap:.9rem;}
.svc-lead{background:var(--ink-2); box-shadow:inset 2px 0 0 var(--pulse);}
.svc ul{margin:.2rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem;}
.svc li{color:var(--bone-2); font-size:.9rem; line-height:1.5; padding-left:1.1rem; position:relative;}
.svc li::before{content:""; position:absolute; left:0; top:.55em; width:5px; height:1px; background:var(--breath);}
.svc .go{margin-top:auto; padding-top:.6rem; color:var(--pulse); transition:color .18s;}
.svc .go:hover{color:var(--pulse-hi);}

/* --- roster -------------------------------------------------------------- */
.roster{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule);}
.rost{background:var(--ink-1); padding:1.4rem;}
.rost b{display:block; font-size:1.05rem; letter-spacing:-.01em; margin-bottom:.35rem;}
.rost span{display:block; color:var(--dim); line-height:1.5;}

.leagues-lead{margin-top:1.9rem; padding-top:1.9rem; border-top:1px solid var(--rule); margin-bottom:1.6rem; color:var(--bone-2); font-size:1rem;}
.leagues-strip{display:flex; align-items:center; flex-wrap:wrap; gap:clamp(1.1rem,1.9vw,1.6rem); justify-content:space-between;}
.leagues-strip img{height:clamp(38px,5.4vw,76px); width:auto; opacity:.82; transition:opacity .2s;}
.leagues-strip img:hover{opacity:1;}
.leagues-strip img[alt="ATP Tour"],
.leagues-strip img[alt="UFC"],
.leagues-strip img[alt="Formula 1"]{height:clamp(25px,3.4vw,50px);}

.corporate{margin-top:2.25rem; padding-top:1.9rem; border-top:1px solid var(--rule); display:flex; gap:clamp(1rem,3vw,2.5rem); align-items:baseline; flex-wrap:wrap;}
.corporate .mono{flex:0 0 auto; padding-top:.4rem;}
.corp-line{flex:1 1 22rem; font-size:clamp(1.2rem,2.6vw,2rem); line-height:1.2; letter-spacing:-.025em; font-weight:700; color:var(--bone);}
.corp-line em{font-style:normal; color:var(--pulse);}

/* --- about --------------------------------------------------------------- */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.75rem,4.5vw,4rem); align-items:start;}
.ph{position:relative; margin:0; border:1px solid var(--rule); overflow:hidden;}
.ph img{display:block; width:100%; height:auto;}
.creds{margin:1.6rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column;}
.creds li{border-top:1px solid var(--rule); padding:.85rem 0; display:flex; gap:1.25rem; align-items:baseline; flex-wrap:wrap;}
.creds em{font-style:normal; color:var(--dim); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; flex:0 0 8.5rem;}
.creds span{color:var(--bone-2); font-size:.94rem; line-height:1.5; flex:1 1 14rem;}

/* --- media --------------------------------------------------------------- */
.shows{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(.6rem,1.2vw,1rem);}
.show{position:relative; display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--rule);}
.show img{display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.86); transition:filter .25s, transform .35s;}
.show:hover img,.show:focus-visible img{filter:none; transform:scale(1.03);}

/* --- speaking ------------------------------------------------------------ */
.topics{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--rule);}
.topic{background:var(--ink-0); padding:1.4rem 1.4rem 1.5rem;}
.topic h3{margin-bottom:.55rem;}
.topic p{color:var(--bone-2); font-size:.9rem; line-height:1.6;}

/* --- inquiry ------------------------------------------------------------- */
.inquiry{background:var(--ink-1); border-top:1px solid var(--rule);}
.inq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.75rem,5vw,4.5rem); align-items:start;}
.inq-copy p{margin-top:1.1rem;}
.inq-where{color:var(--dim);}
.form{display:flex; flex-direction:column; gap:1.1rem;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.field{display:flex; flex-direction:column; gap:.5rem;}
.field label,.legend{color:var(--dim); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;}
.field input,.field textarea{
  background:var(--ink-0); border:1px solid var(--rule); color:var(--bone);
  padding:.8rem .9rem; border-radius:2px; font-family:var(--f); font-size:.95rem;
  width:100%; transition:border-color .18s;
}
.field textarea{resize:vertical; min-height:6.5rem; line-height:1.6;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--breath);}
.field input::placeholder,.field textarea::placeholder{color:#4C5C5E;}
.field input:user-invalid{border-color:var(--pulse);}

fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.seg{display:flex; flex-wrap:wrap; gap:.5rem;}
.seg label{
  border:1px solid var(--rule); padding:.6rem .9rem; border-radius:2px; color:var(--dim);
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  cursor:pointer; transition:border-color .18s,color .18s,background .18s;
}
.seg input{position:absolute; opacity:0; width:0; height:0;}
.seg input:checked + label{border-color:var(--pulse); color:var(--pulse); background:rgba(217,72,43,.08);}
.seg input:focus-visible + label{outline:2px solid var(--breath); outline-offset:2px;}

/* honeypot: never shown, never announced */
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-msg{display:none; padding:.9rem 1rem; border-radius:2px; font-size:.92rem; line-height:1.6;}
.form-msg.show{display:block;}
.form-msg.ok{border:1px solid var(--rule-2); color:var(--bone); background:rgba(111,166,174,.08);}
.form-msg.bad{border:1px solid var(--pulse); color:var(--bone); background:rgba(217,72,43,.08);}

/* --- footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--rule);}
.foot-in{padding-top:3rem; padding-bottom:3rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:2rem;}
.foot h4{margin:0 0 .9rem; font-weight:400;}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.55rem;}
.foot a{color:var(--bone-2); font-size:.92rem;}
.foot a:hover{color:var(--bone);}
.foot-blurb{margin-top:.9rem; color:var(--dim);}
.handoff{border:1px solid var(--rule); padding:1.1rem 1.25rem; color:var(--bone-2); font-size:.9rem; line-height:1.6;}
.handoff a{color:var(--breath); border-bottom:1px solid var(--rule-2);}
.colophon{border-top:1px solid var(--rule); padding:1.25rem 0; color:var(--dim); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;}

/* ==========================================================================
   Responsive. The hero photograph is not decoration, so it stays on small
   screens and moves under the copy rather than being hidden.
   ========================================================================== */
@media (max-width:1000px){
  .argument,.about,.inq-grid{grid-template-columns:1fr;}
  .about .ph{max-width:26rem;}
}

@media (max-width:860px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--ink-0);
    border-bottom:1px solid var(--rule); padding:.5rem var(--gut) 1.25rem;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:.85rem 0; border-top:1px solid var(--rule);}
  .nav-toggle{
    display:inline-flex; align-items:center; gap:.5rem; background:none;
    border:1px solid var(--rule-2); color:var(--bone); border-radius:2px;
    padding:.6rem .8rem; cursor:pointer; font-family:var(--f-mono);
    font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  }
  .nav-cta{display:none;}

  .hero-in{grid-template-columns:1fr; gap:2rem; padding-bottom:clamp(5rem,18vw,7rem);}
  .hero-figure{order:2; max-width:22rem;}
  .hero-copy{order:1;}
  #trace{height:14%;}

  .row{grid-template-columns:1fr;}
  .readout{grid-template-columns:1fr 1fr;}
  .cell{padding-right:1rem;}
  .cell:nth-child(2n){border-right:0;}
  .cell:nth-child(n+3){border-top:1px solid var(--rule);}
}

@media (max-width:620px){
  .press{gap:1rem; padding:1.5rem 0;}
  .press-marks{gap:1.4rem 1.75rem; justify-content:flex-start;}
  .leagues-strip{gap:1.4rem 1.75rem; justify-content:flex-start;}
  .corporate{gap:.75rem;}
  .creds li{gap:.35rem;}
  .creds em{flex:1 1 100%;}
  .colophon{flex-direction:column; gap:.4rem;}
}

@media (max-width:420px){
  .readout{grid-template-columns:1fr;}
  .cell{border-right:0; border-top:1px solid var(--rule);}
  .cell:first-child{border-top:0;}
  .btn{width:100%; text-align:center;}
  .cta-row{gap:.6rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}

@media print{
  #trace,.nav-toggle{display:none;}
  body{background:#fff; color:#000;}
}