/* ===========================================================================
   steffichern.github.io
   A sticky identity spine on the left, content bands on the right,
   a putting green at the foot of the page.
   =========================================================================== */

:root{
  --ink:#1a1d1f;
  --ground:#ffffff;
  --spine:#f4f6f6;
  --rule:#e3e7e8;
  --rule-soft:#eef1f1;
  --muted:#6b7176;
  --accent:#7a3b61;
  --accent-soft:#f6eff3;
  --accent-line:#dcc3d0;
  --turf:#8ca58c;
  --turf-soft:#dfe7df;
  --turf-deep:#5d6f5d;
  --sky-high:#e9f5fc;
  --sky-low:#f8fcfe;
  --sans:"Libre Franklin",-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --spine-w:288px;
  --page-max:1440px;   /* how wide the whole layout may run */
  --measure:100%;      /* how wide text may run inside it; set to 62ch to tighten */
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}
h1,h2,h3{margin:0; font-weight:inherit;}
a{text-decoration:none; color:inherit;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* the left column runs the full height of the page, the spine sticks to it */
.wrap{
  max-width:var(--page-max);
  margin-inline:auto;
  display:grid;
  grid-template-columns:var(--spine-w) 1fr;
  grid-template-rows:1fr auto;   /* content takes the slack, the green stays 146px */
  min-height:100vh;
  background:linear-gradient(
    to right,
    var(--spine) 0 var(--spine-w),
    var(--rule) var(--spine-w) calc(var(--spine-w) + 1px),
    var(--ground) calc(var(--spine-w) + 1px)
  );
}

/* --------------------------------------------------------------- spine --- */
.spine{
  padding:44px 32px;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:0;
  align-self:start;
}
.portrait{
  width:128px;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:50% 22%;
  border:1px solid var(--rule);
  display:block;
  background:#fff;
}
.spine .name{font-size:31px; font-weight:600; letter-spacing:-.021em; line-height:1.08;}
.spine .role{font-size:14.5px; line-height:1.6; color:var(--muted); font-weight:300;}
.spine .role b{color:var(--ink); font-weight:500;}
.spine .where{
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px;
}
.spine .links{display:flex; flex-direction:column; border-top:1px solid var(--rule); margin-top:2px;}
.spine .links a{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.075em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--rule-soft);
}
.spine .links a:hover{color:var(--accent);}
.ico{width:14px; height:14px; flex:0 0 14px; fill:currentColor; display:block;}
.ico--sm{width:12px; height:12px; flex:0 0 12px;}

/* ------------------------------------------------------------- content --- */
.col{padding:48px 56px 56px; min-width:0; display:flex; flex-direction:column;}

.opening{display:flex; flex-direction:column; gap:16px; max-width:var(--measure); padding-bottom:40px;}
.opening p{font-size:17px; font-weight:300; line-height:1.72;}
.opening a{color:var(--accent); border-bottom:1px solid var(--accent-line); padding-bottom:.5px;}
.opening a:hover{border-bottom-color:var(--accent);}

.band{padding:34px 0; border-top:1px solid var(--rule);}
.band__head{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.band__lab{
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--accent);
}
.band__lead{font-size:15.5px; font-weight:300; color:var(--muted); margin-bottom:16px; max-width:var(--measure);}
.band__lead a{color:var(--accent); border-bottom:1px solid var(--accent-line);}
.band__lead a:hover{border-bottom-color:var(--accent);}

/* research — a keyline down the left of each interest, no panel */
.ints{display:flex; flex-direction:column; gap:20px; max-width:var(--measure);}
.ints li{border-left:2px solid var(--accent-line); padding:1px 0 1px 17px;}
.refs{font-family:var(--sans); font-size:11.5px; font-weight:500; color:#a2a8ac; white-space:nowrap;}
.refs a{
  color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--accent-line); padding-bottom:1px;
}
.refs a:hover{border-bottom-color:var(--accent);}

.ints .v{font-weight:300; font-size:15.5px; line-height:1.65; color:#33383b; display:block; max-width:var(--measure);}

/* publications — a thumbnail in front of every paper */
.pubs{display:flex; flex-direction:column;}
.pub{
  display:grid; grid-template-columns:104px 1fr; gap:0 20px;
  padding:18px 0; border-bottom:1px solid var(--rule-soft); align-items:center;
}
.pub--bare{grid-template-columns:1fr;}
.pubs .pub:first-child{padding-top:0;}
.pubs .pub:last-child{border-bottom:0; padding-bottom:0;}
.thumb{
  width:104px; aspect-ratio:4/3; max-width:100%;
  border:1px solid var(--rule); background:#fff;
  display:block; overflow:hidden;
}
/* contain, not cover: paper figures come in every aspect ratio and cropping
   the edges off a figure usually removes the part that explains it */
.thumb img{width:100%; height:100%; object-fit:contain; display:block; transform-origin:center;}
.pub__body{min-width:0; display:flex; flex-direction:column; gap:4px;}
.pub{scroll-margin-top:24px;}
.pub .num{
  display:inline-block; min-width:1.1em; margin-right:.7em;
  color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums;
}
.pub .ven{
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.pub .t{font-size:17.5px; font-weight:600; line-height:1.34; letter-spacing:-.012em;}
.pub .au{font-size:13.5px; color:var(--muted); font-weight:300; line-height:1.5;}
.pub .au b{color:var(--ink); font-weight:500;}
.pub .au sup{font-size:.8em; font-weight:600; color:var(--accent); line-height:0; vertical-align:super; padding-left:.5px;}
.pub .lk{display:flex; gap:14px; flex-wrap:wrap; margin-top:4px;}
.pub .lk a{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  display:flex; align-items:center; gap:5px;
}
.pub .lk a:hover{color:var(--accent); border-bottom-color:var(--accent-line);}

.serviceline{font-size:16px; font-weight:300; line-height:1.65; color:#33383b; max-width:var(--measure);}

/* teaching — term in the margin */
.teach{display:flex; flex-direction:column; max-width:var(--measure);}
.teach li{
  display:grid; grid-template-columns:132px 1fr; gap:0 20px;
  padding:12px 0; border-bottom:1px solid var(--rule-soft); align-items:baseline;
}
.teach li:first-child{padding-top:0;}
.teach li:last-child{border-bottom:0; padding-bottom:0;}
.teach .term{
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.teach .course{font-size:16px; font-weight:500; line-height:1.4;}
.teach .course i{font-style:italic; font-weight:400;}
.teach .inst{font-size:13.5px; color:var(--muted); font-weight:300;}

/* ---------------------------------------------------- the putting green --- */
.foot{grid-column:1/-1; border-top:1px solid var(--rule); background:var(--sky-low);}
.green{
  position:relative; height:158px; overflow:hidden; cursor:pointer;
  background:linear-gradient(var(--sky-high) 0%, var(--sky-low) 70%);
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
}
.green:focus-visible{outline:2px solid var(--accent); outline-offset:-3px;}

.sun{position:absolute; top:12px; left:29%; width:52px; height:52px;}
.sun svg{width:100%; height:100%; display:block; overflow:visible;}
.sun .disc{fill:#f7dfa2;}
.sun .rays path{stroke:#f2d38d; stroke-width:2.6; stroke-linecap:round; fill:none;}
.sun .rays{transform-origin:30px 30px; animation:spin 48s linear infinite;}
.sun .halo{fill:#f7dfa2; opacity:.22; animation:breathe 5s ease-in-out infinite alternate;}

.bird{position:absolute; display:block;}
.bird svg{width:100%; height:100%; display:block; overflow:visible;}
.bird .wings{
  stroke:#93a8ad; stroke-width:1.7; stroke-linecap:round; fill:none;
  transform-origin:15px 9px; animation:flap .46s ease-in-out infinite alternate;
}
.bird .dot{fill:#93a8ad;}
.b1{width:27px; height:15px; top:22px; animation:flyby 19s linear infinite;}
.b2{width:19px; height:11px; top:40px; animation:flyby 26s linear infinite 3.5s;}
.b3{width:22px; height:12px; top:10px; animation:flyby 33s linear infinite 8s;}
.b2 .wings{animation-duration:.58s;}
.b3 .wings{animation-duration:.39s;}

.cloud{position:absolute; height:9px; border-radius:20px; background:#fff; opacity:.85;}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%;}
.cloud::before{width:13px; height:13px; left:7px; top:-6px;}
.cloud::after{width:9px; height:9px; left:21px; top:-4px;}
.c1{width:38px; top:20px; animation:drift 38s linear infinite;}
.c2{width:28px; top:46px; opacity:.6; animation:drift 56s linear infinite 9s;}

.turf{position:absolute; left:0; right:0; bottom:0; height:30px; background:var(--turf-soft); border-top:1px solid var(--turf);}
.tuft{
  position:absolute; bottom:29px; width:8px; height:9px; background:var(--turf); opacity:.55;
  clip-path:polygon(0 100%,18% 22%,34% 100%,50% 8%,66% 100%,82% 30%,100% 100%);
}
.hole{position:absolute; bottom:24px; left:76%; width:17px; height:6px; background:var(--turf-deep); border-radius:50%;}
.pole{position:absolute; bottom:27px; left:calc(76% + 8px); width:1.5px; height:58px; background:#9aa39a;}
.flag{
  position:absolute; top:0; left:1.5px; width:22px; height:13px; background:var(--accent);
  clip-path:polygon(0 0,100% 50%,0 100%); transform-origin:left center;
  animation:wave 2.6s ease-in-out infinite alternate;
}

.golfer{position:absolute; bottom:24px; left:1.5%; width:66px; height:100px;}
.golfer svg{width:100%; height:100%; display:block; overflow:visible;}
.club{transform-origin:49px 55px; transition:transform .16s ease-out;}
.eye{transform-box:fill-box; transform-origin:50% 50%; animation:blink 4.6s infinite;}
.golfer.cheer{animation:hop .62s ease-out;}
.golfer.back .club{transform:rotate(-30deg);}
.golfer.swing .club{animation:swing .5s cubic-bezier(.3,1.4,.5,1);}

.ball{
  position:absolute; bottom:27px; left:8%; width:11px; height:11px; border-radius:50%;
  background:#fff; border:1px solid #bfc7c9; box-shadow:inset -2px -2px 0 rgba(0,0,0,.06);
}
.ball.sunk{
  transform:translateY(8px) scale(.5)!important; opacity:0;
  transition:transform .34s cubic-bezier(.5,0,.85,.4), opacity .34s ease-in .06s;
}

.pop{
  position:absolute; left:calc(76% + 8.5px); bottom:46px;
  width:0; height:0; pointer-events:none;
}
.pop i{
  position:absolute; left:-2.5px; bottom:-2.5px; width:5px; height:5px; border-radius:50%;
  background:var(--c,#7a3b61); opacity:0;
}
.pop.go i{animation:burst .85s cubic-bezier(.14,.7,.3,1) var(--t,0s) forwards;}
.pop.go::after{
  content:""; position:absolute; left:-7px; bottom:-7px; width:14px; height:14px;
  border-radius:50%; background:#fff; animation:flash .4s ease-out forwards;
}
@keyframes burst{
  0%   {opacity:0; transform:rotate(var(--a)) translateY(0) scale(.4);}
  14%  {opacity:1;}
  70%  {opacity:1;}
  100% {opacity:0; transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.3);}
}
@keyframes flash{
  0%   {opacity:.85; transform:scale(.3);}
  100% {opacity:0;   transform:scale(1.5);}
}

.hud{
  position:absolute; top:12px; right:16px; display:flex; flex-direction:column;
  align-items:flex-end; gap:5px; font-family:var(--sans); pointer-events:none;
}
.score{
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; opacity:0; transition:opacity .3s;
}
.score.on{opacity:1;}
.msg{
  font-size:12.5px; font-weight:600; color:var(--accent);
  opacity:0; transform:translateY(-3px); transition:opacity .25s, transform .25s;
}
.msg.on{opacity:1; transform:translateY(0);}
.hint{
  position:absolute; bottom:40px; left:92px;
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:#9aa3a6;
  transition:opacity .4s; pointer-events:none;
}
.hint.gone{opacity:0;}
.meter{
  position:absolute; bottom:40px; left:92px; width:118px; height:6px;
  background:#fff; border:1px solid var(--rule); opacity:0; transition:opacity .15s;
}
.meter.on{opacity:1;}
.meter__fill{height:100%; width:0%; background:var(--accent);}
.meter__zone{
  position:absolute; top:-1px; bottom:-1px; left:83.8%; width:8.7%;
  border-left:1px solid var(--turf); border-right:1px solid var(--turf);
  background:rgba(140,165,140,.35);
}

@keyframes swing{
  0%{transform:rotate(-30deg);} 22%{transform:rotate(16deg);}
  55%{transform:rotate(4deg);} 100%{transform:rotate(0deg);}
}
@keyframes wave{
  0%{transform:scaleX(1) skewY(0deg);} 50%{transform:scaleX(.86) skewY(-3deg);} 100%{transform:scaleX(1) skewY(2deg);}
}
@keyframes drift{0%{left:-18%;} 100%{left:116%;}}
@keyframes flyby{
  0%{left:-16%; transform:translateY(0);}
  25%{transform:translateY(-9px);}
  55%{transform:translateY(4px);}
  80%{transform:translateY(-6px);}
  100%{left:116%; transform:translateY(0);}
}
@keyframes flap{from{transform:scaleY(1);} to{transform:scaleY(.5);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes breathe{from{transform:scale(1);} to{transform:scale(1.09);}}
@keyframes blink{0%,92%,100%{transform:scaleY(1);} 95%,97%{transform:scaleY(.12);}}
@keyframes hop{0%{transform:translateY(0);} 25%{transform:translateY(-8px);} 50%{transform:translateY(0);} 72%{transform:translateY(-4px);} 100%{transform:translateY(0);}}

@media (prefers-reduced-motion:reduce){
  .flag,.cloud,.bird,.bird .wings,.sun .rays,.sun .halo,.eye{animation:none;}
  .pop.go i,.pop.go::after{animation:none; opacity:0;}
  .c1{left:12%;} .c2{left:52%;} .b1{left:26%;} .b2{left:56%;} .b3{left:78%;}
}

@media (max-width:780px){
  .wrap{grid-template-columns:1fr; grid-template-rows:auto 1fr auto; background:var(--ground);}
  .spine{
    position:static; background:var(--spine);
    border-bottom:1px solid var(--rule); padding:32px 20px;
  }
  .col{padding:30px 20px 38px;}
  .opening p{font-size:16.5px;}
  .pub{grid-template-columns:76px 1fr; gap:0 14px;}
  .thumb{width:76px;}
  .teach li{grid-template-columns:1fr; gap:3px;}
  .green{height:142px;}
  .golfer{width:56px; height:86px;}
  .sun{width:42px; height:42px; left:34%;}
  .hint,.meter{left:78px;}
}