:root{
  /* Swap these four to match the production palette when you have it handy. */
  --bg:#F1F3F1;
  --ink:#15201B;
  --muted:#5A6660;
  --accent:#1E4D3B;

  --line:#D3D9D4;
  --field:#FFFFFF;
  --warn:#8A2B1F;

  --sans:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent)}
a:hover{color:var(--ink)}

.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:1rem;
  top:1rem;
  background:var(--field);
  padding:.6rem .9rem;
  border:2px solid var(--accent);
  z-index:5;
}

.page{
  max-width:600px;
  margin:0 auto;
  padding:4.5rem 1.5rem 3.5rem;
}

/* Masthead */
.mast{
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.mark{
  margin:0;
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1.15;
  letter-spacing:.005em;
}
.tag{
  margin:.5rem 0 0;
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.02em;
}

/* Lede */
.lede{margin-top:2.6rem}
.lede h1{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.55rem;
  line-height:1.3;
}
.lede p{
  margin:.85rem 0 0;
  color:var(--muted);
}

/* Identity block */
.who{
  display:flex;
  align-items:center;
  gap:1.4rem;
  margin-top:2.6rem;
  padding:1.5rem 0 0;
  border-top:1px solid var(--line);
}
.portrait{
  width:118px;
  height:118px;
  flex:0 0 auto;
  object-fit:cover;
  border-radius:2px;
  background:var(--line);
  box-shadow:6px 6px 0 0 var(--accent);
}
.who-text{min-width:0}
.exp{
  display:block;
  width:155px;   /* 150px is the floor for COMMERCIAL to stay legible */
  height:auto;
  margin:.1rem 0 .9rem;
}
.direct{
  margin:0;
  padding:0;
  list-style:none;
  font-size:.98rem;
}
.direct li{margin-top:.15rem}
.direct a{
  text-decoration:none;
  border-bottom:1px solid var(--line);
  word-break:break-word;
}
.direct a:hover{border-bottom-color:var(--accent)}

/* Bio */
.bio{
  margin-top:1.8rem;
  padding-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.bio p{
  margin:0 0 1rem;
  font-size:.99rem;
  color:var(--muted);
}
.bio p:first-child{color:var(--ink)}
.bio p:last-child{margin-bottom:0}

/* Form */
.form-wrap{margin-top:2.8rem}
.form-wrap h2{
  margin:0 0 1.3rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.25rem;
}
.field{margin-bottom:1.15rem}
label{
  display:block;
  margin-bottom:.35rem;
  font-size:.9rem;
  color:var(--muted);
}
.opt{color:var(--line)}
input,textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:var(--field);
  border:1px solid var(--line);
  border-radius:2px;
  padding:.65rem .7rem;
}
textarea{resize:vertical}
input:focus,textarea:focus,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}

.trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.cf-turnstile{margin:1.4rem 0 1.2rem}

button{
  font:inherit;
  font-size:1rem;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  border-radius:2px;
  padding:.7rem 1.5rem;
  cursor:pointer;
}
button:hover{background:var(--ink);border-color:var(--ink)}
button[disabled]{opacity:.55;cursor:default}

.status{
  margin:1rem 0 0;
  font-size:.95rem;
  min-height:1.4em;
}
.status.ok{color:var(--accent)}
.status.bad{color:var(--warn)}

/* Footer */
.foot{
  margin-top:3rem;
  padding-top:1.3rem;
  border-top:1px solid var(--line);
  font-size:.88rem;
  color:var(--muted);
}
.foot-contact{margin:0}
.foot-contact a{text-decoration:none}
.sep{padding:0 .4rem;color:var(--line)}
.disclosure{margin:.5rem 0 0}

@media (max-width:520px){
  .page{padding:3rem 1.25rem 2.5rem}
  .mark{font-size:1.6rem}
  .who{
    display:block;
  }
  .portrait{
    width:96px;
    height:96px;
    box-shadow:5px 5px 0 0 var(--accent);
  }
  .who-text{margin-top:1.2rem}
}

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