/* roberthatton.com — mobile-first, single column, dark */
:root{
  --ground:#0A1424;
  --ink:#E9E6DD;
  --ink-soft:#9AA3B2;
  --rule:#1F2D44;
  --gold:#D9B45A;
  --gold-pale:#FFEE9C;
  --measure:34rem;
  --wide:68rem;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Charter,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ground);color-scheme:dark}
body{
  margin:0;
  font-family:var(--serif);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--ground);
  padding:1.5rem 1.25rem 4rem;
}
::selection{background:var(--gold);color:var(--ground)}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(217,180,90,.6);transition:color .15s,border-color .15s}
a:hover{color:var(--gold);border-bottom-color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-bottom-color:transparent}

.page{max-width:var(--measure);margin:0 auto}

.top{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:3rem}
.sig{display:block;width:clamp(8.5rem,38vw,13rem);border:0}
.sig svg{display:block;width:100%;height:auto;overflow:visible}
.lang{display:flex;gap:.75rem;margin:0 0 .5rem;padding:0;list-style:none}
.lang a{display:block;border:0;padding:.25rem;border-radius:3px;opacity:.55;transition:opacity .2s}
.lang a svg{display:block;width:1.5rem;height:1rem;box-shadow:0 0 0 1px rgba(233,230,221,.18)}
.lang a:hover,.lang a:focus-visible{opacity:1}
.lang a[aria-current]{opacity:1;box-shadow:0 2px 0 var(--gold)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.lede{
  font-size:clamp(1.9rem,6.5vw,2.7rem);
  line-height:1.15;
  font-weight:400;
  letter-spacing:-.005em;
  margin:0 0 2.25rem;
  text-wrap:balance;
}
.lede em{font-style:normal;white-space:nowrap;color:var(--gold-pale)}

figure.portrait{margin:0 0 2.5rem;width:min(100%,16rem)}
figure.portrait img,figure.portrait .ph{
  display:block;width:100%;aspect-ratio:3/4;
  border-radius:2px;background:#132038;color:var(--ink-soft);font-size:.8125rem;
}
figure.portrait img{height:auto;object-fit:cover;filter:saturate(.92)}
figure.portrait .ph{display:grid;place-items:center;text-align:center;padding:1rem}

/* Desktop: anchor column (headline + portrait) stays put, text scrolls beside it */
@media (min-width:56rem){
  .page{max-width:var(--wide)}
  .top{margin-bottom:3.5rem}
  .layout{display:grid;grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);column-gap:clamp(3rem,7vw,6rem);align-items:start}
  .anchor{position:sticky;top:2rem}
  .lede{font-size:clamp(2rem,3.2vw,2.6rem);margin-bottom:2rem}
  figure.portrait{width:100%;max-width:20rem;margin:0}
  main h2:first-child{margin-top:0;padding-top:0;border-top:0}
  main > p:first-child{margin-top:.35rem}
}

p{margin:0 0 1.25rem;max-width:var(--measure)}
.invite{margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.invite a{white-space:nowrap}

h2{
  font-size:1.25rem;font-weight:600;letter-spacing:.005em;color:var(--ink);
  margin:3rem 0 1rem;padding-top:1.25rem;border-top:1px solid var(--rule);
}

ul.built{list-style:none;padding:0;margin:0 0 1.25rem}
ul.built li{position:relative;padding-left:1.25rem;margin:0 0 .6rem}
ul.built li::before{content:"";position:absolute;left:0;top:.75em;width:.5rem;height:1px;background:var(--gold)}

.timeline{margin:0;padding:0}
.timeline > div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.65rem 0;border-top:1px solid var(--rule)}
.timeline > div:first-child{border-top:0}
.timeline dt{margin:0;color:var(--ink-soft);font-variant-numeric:tabular-nums;font-size:.9375rem;line-height:1.7}
.timeline dd{margin:0}

footer{
  margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;
  font-size:.9375rem;color:var(--ink-soft)
}
footer .sig{width:6rem;opacity:.75}
.follow{text-align:right}
.follow-title{margin:0 0 .6rem;color:var(--ink-soft);font-size:.9375rem}
.follow ul{display:flex;gap:.5rem;justify-content:flex-end;margin:0;padding:0;list-style:none}
.follow a{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--rule);border-radius:50%;color:var(--ink-soft);transition:color .2s,border-color .2s}
.follow a svg{width:.95rem;height:.95rem;fill:currentColor}
.follow a:hover,.follow a:focus-visible{color:var(--gold);border-color:var(--gold)}

/* Signature reveal: one pass on load, left to right, then still */
.sig .reveal{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:no-preference){
  header .sig .reveal{animation:write 1.6s cubic-bezier(.35,0,.25,1) .15s both}
  @keyframes write{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
  .lede{animation:settle .8s ease-out 1.2s both}
  @keyframes settle{from{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:none}}
}
@media print{
  html,body{background:#fff;color:#000}
  .lang,footer{display:none}
}