/* v2/horizon — the Oxbow, its horizon, and the words that hang from it */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --serif:"Benne","EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* words on the painting */
  --paper:#f7f4ee; --paper-80:rgba(247,244,238,.8); --paper-60:rgba(247,244,238,.6); --hair:rgba(247,244,238,.62);
  --ground:#2c312d;                 /* what the painting dissolves into below the first screen */
  --hair-soft:rgba(247,244,238,.18);
  --sage:#b3c4b0; --rose:#d8a69d;    /* accents that read on the dark field */
  --gutter:2.6rem;
}
html{font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--sans);background:#3a3d3b;color:var(--paper);min-height:100vh;min-height:100svh;overflow-x:hidden}
body.landing{overflow:hidden;background:#6f6353}
/* the painting washed behind a warm screen, the way the legacy page sat behind cream */
body.landing .scene{filter:saturate(.62) sepia(.22) brightness(1.06) contrast(.82);animation-name:sceneInWashed}
@keyframes sceneInWashed{to{opacity:.6}}
body.landing .veil{background:
    linear-gradient(180deg,rgba(10,12,14,.08) 0%,rgba(10,12,14,0) 30%),
    linear-gradient(0deg,rgba(10,12,14,.44) 0%,rgba(10,12,14,.14) 40%,rgba(10,12,14,0) 62%),
    linear-gradient(rgba(150,126,92,.3),rgba(150,126,92,.3))}
body.inner{background:var(--ground);--ink:var(--paper);--soft:var(--paper-80);--muted:var(--paper-60);--faint:var(--paper-60)}
/* inner pages flow normally: the masthead sits near the top, and the page grows with whatever hangs from it */
body.inner .stage{padding-top:7.6rem}
body.inner .horizon{position:relative;top:auto}
body.inner .cluster{position:relative;top:auto;left:auto;margin-left:var(--gutter);padding-bottom:3.2rem}
body.inner .scene,body.inner .veil{position:absolute;inset:auto;top:0;left:0;right:0;height:100vh;height:100svh}
/* inner pages: the same painting, but softened into a quiet field so the words have the room */
body.inner .scene{overflow:hidden;background:none;filter:none}
body.inner .scene::before{content:"";position:absolute;inset:-40px;
  background:url("/assets/oxbow.jpg?v=4") center 44%/cover no-repeat;
  filter:blur(20px) saturate(.7) brightness(.74) contrast(.96)}
body.inner .veil{background:
    linear-gradient(0deg,var(--ground) 0%,rgba(44,49,45,.86) 12%,rgba(44,49,45,0) 44%),
    linear-gradient(rgba(150,120,80,.06),rgba(150,120,80,.06))}

/* ---------- the painting, veiled in haze ---------- */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/oxbow.jpg?v=4") center 44%/cover no-repeat;
  filter:saturate(.8) brightness(.97) contrast(.96);
  opacity:0;animation:sceneIn 1.1s ease .02s forwards}
@keyframes sceneIn{to{opacity:1}}
.veil{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(10,12,14,.16) 0%,rgba(10,12,14,0) 28%),
    linear-gradient(0deg,rgba(10,12,14,.36) 0%,rgba(10,12,14,.1) 38%,rgba(10,12,14,0) 58%),
    radial-gradient(115% 85% at 50% 50%,rgba(0,0,0,0) 62%,rgba(0,0,0,.14) 100%),
    linear-gradient(rgba(150,120,80,.07),rgba(150,120,80,.07))}

/* ---------- the loupe — a clear window in the haze, a little closer (landing only) ---------- */
.loupe{position:fixed;left:0;top:0;z-index:3;width:202px;height:202px;pointer-events:none;
  border:1px solid rgba(247,244,238,.92);box-shadow:0 0 0 1px rgba(0,0,0,.12);
  opacity:0;animation:loupeIn .7s ease .3s forwards;will-change:transform}
@keyframes loupeIn{to{opacity:1}}
.loupe .glass{position:absolute;inset:0;background:url("/assets/oxbow.jpg?v=4") no-repeat 0 0}

/* ---------- the strip: today's date and a ticking clock, across the top of the landing ---------- */
.strip{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;
  padding:1.5rem var(--gutter);font-family:var(--serif);font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:var(--paper-80);
  opacity:0;animation:stripIn .9s ease .55s forwards}
@keyframes stripIn{to{opacity:1}}
.strip .clock{position:absolute;left:50%;transform:translateX(-50%);letter-spacing:.06em;color:var(--paper)}
.clock .d{display:inline-block;width:.6em;text-align:center}
.clock .c{display:inline-block;width:.34em;text-align:center;opacity:.7}

/* ---------- the first screen: the horizon, extended into a rule; the name rests on it ---------- */
.stage{position:relative;z-index:4;min-height:100vh;min-height:100svh}
body.landing .stage{height:100vh;height:100svh}
.horizon{position:absolute;left:0;right:0;top:44%;height:1px;pointer-events:none;background:var(--hair);
  transform:scaleX(0);transform-origin:0 50%;animation:draw 1.2s cubic-bezier(.22,.61,.36,1) .15s forwards}
@keyframes draw{to{transform:scaleX(1)}}
.cluster{position:absolute;left:var(--gutter);top:44%;width:min(56rem,calc(100vw - 2*var(--gutter)))}
body.inner .cluster{width:min(62rem,calc(100vw - 2*var(--gutter)))}
.shelf{position:absolute;left:0;bottom:100%;display:flex;align-items:flex-end;gap:1.4rem}
/* the portrait stands beside the name, on the same line */
.portrait{height:132px;width:auto;display:block;margin-bottom:.1em;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
body.inner .portrait{height:112px}
.name{display:block;padding-bottom:.08em;line-height:1.35;white-space:nowrap;
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(3.2rem,5.8vw,5rem);letter-spacing:-.014em;
  color:var(--paper);text-decoration:none;text-shadow:0 1px 16px rgba(0,0,0,.28)}
nav{display:flex;flex-wrap:wrap;gap:.3rem 2.2rem;padding-top:1.3rem;font-family:var(--serif);font-size:1.28rem;font-weight:400;letter-spacing:.005em}
nav a{position:relative;color:var(--paper-80);text-decoration:none;padding-bottom:1px;transition:color .25s ease}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:var(--paper);
  transition:right .3s cubic-bezier(.22,.61,.36,1)}
nav a:hover,nav a:focus-visible{color:var(--paper);outline:none}
nav a:hover::after,nav a:focus-visible::after{right:0}
nav a[aria-current="page"]{color:var(--paper)}
nav a[aria-current="page"]::after{right:0;background:var(--hair)}
.bio{margin-top:2rem;font-family:var(--serif);font-size:1.7rem;line-height:1.36;color:#ffffff;text-shadow:0 1px 14px rgba(0,0,0,.42)}
.bio a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .25s ease}
.bio a:hover,.bio a:focus-visible{border-bottom-color:var(--paper);outline:none}
.bio2{margin-top:1.1rem;color:#ffffff}
/* "Email" whispers the address on hover */
.email-hint{position:relative}
.email-hint .eh-tip{position:absolute;left:50%;bottom:calc(100% + .15rem);transform:translate(-50%,3px);white-space:nowrap;
  font-family:var(--serif);font-style:normal;font-size:.66rem;font-weight:450;letter-spacing:.05em;color:var(--paper);
  background:rgba(20,24,22,.85);border-radius:2px;padding:.22rem .5rem;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease}
.email-hint:hover .eh-tip,.email-hint:focus-visible .eh-tip{opacity:1;transform:translate(-50%,0)}
.links{position:absolute;right:var(--gutter);bottom:2.4rem;font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;color:var(--paper-80)}
.links a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px;transition:border-color .25s ease}
.links a:hover,.links a:focus-visible{border-bottom-color:var(--paper);outline:none}
.links .sep{margin:0 .6rem}

/* ---------- the lists: hang from the nav, in the same white as the bio ---------- */
.list{list-style:none;margin-top:2.2rem}
.list li{border-top:1px solid var(--hair-soft)}
.list li:first-child{border-top:none}
.work li{display:grid;grid-template-columns:1fr auto;gap:0 2rem;padding:2rem 0;align-items:start}
.work li:first-child{padding-top:.1rem}
.work-title{font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.22;color:var(--paper)}
.work-org{margin-top:.55rem;font-family:var(--serif);font-size:.9rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-60)}
.work-desc{font-family:var(--serif);margin-top:.85rem;font-size:1.3rem;line-height:1.5;color:var(--paper-80);max-width:58rem}
.work-links{margin-top:.95rem;font-family:var(--serif);font-size:1rem;letter-spacing:.01em;color:var(--paper-60)}
.work-links a{color:var(--paper-80);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.work-links a:hover,.work-links a:focus-visible{color:var(--paper);border-bottom-color:var(--paper);outline:none}
.work-links .sep{margin:0 .55rem}
.work-year{font-family:var(--serif);font-size:1.02rem;color:var(--paper-80);white-space:nowrap;padding-top:.45rem;font-variant-numeric:tabular-nums}
.posts li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.8rem 0}
.posts li:first-child{padding-top:.1rem}
.post-link{font-family:var(--serif);font-weight:500;font-size:1.7rem;line-height:1.22;letter-spacing:-.005em;color:var(--paper);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s ease}
.post-link:hover,.post-link:focus-visible{border-bottom-color:var(--hair);outline:none}
.post-when{font-family:var(--serif);font-size:1.15rem;color:var(--paper-80);white-space:nowrap;font-variant-numeric:lining-nums}
.post-desc{font-family:var(--serif);font-size:1.26rem;line-height:1.45;color:var(--paper-80);margin-top:.45rem;max-width:56rem}

/* ---------- a post: the same white, set for reading ---------- */
.post{margin-top:2.1rem;font-family:var(--serif);color:var(--paper-80)}
.post-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,1.9rem);line-height:1.15;letter-spacing:-.01em;color:var(--paper);margin:0}
.post p.post-date{font-family:var(--sans);font-size:.78rem;letter-spacing:.03em;color:var(--paper-80);margin:.85rem 0 2.3rem}
.post p{font-size:1.14rem;line-height:1.6;color:var(--paper-80);margin:1.1rem 0}
.post a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--hair);transition:border-color .22s ease}
.post a:hover,.post a:focus-visible{border-bottom-color:var(--paper);outline:none}
.post em{font-style:italic}
.post h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;line-height:1.2;color:var(--paper);margin:2.9rem 0 .2rem}
.post h3{font-family:var(--serif);font-weight:500;font-size:1.28rem;color:var(--paper-80);margin:2.4rem 0 .3rem}

/* the foot of an inner page, on the ground */
.foot{position:relative;z-index:4;padding:0 var(--gutter) 2.4rem;font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;color:var(--paper-80)}
.foot a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:1px;transition:border-color .25s ease}
.foot a:hover,.foot a:focus-visible{border-bottom-color:var(--paper);outline:none}
.foot .sep{margin:0 .6rem}

/* ---------- entrance ---------- */
.name,.portrait,nav,.bio,.links,.list,.foot{opacity:0;transform:translateY(6px);animation:rise .9s cubic-bezier(.22,.61,.36,1) forwards}
.name{animation-delay:.3s} .portrait{animation-delay:.35s} nav{animation-delay:.4s} .bio{animation-delay:.5s} .links{animation-delay:.6s} .list{animation-delay:.5s} .foot{animation-delay:.65s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:720px){
  html{font-size:16px}
  :root{--gutter:1.3rem}
  .name{font-size:2.5rem}
  nav{gap:.3rem 1.4rem;padding-top:.95rem;font-size:.92rem}
  .bio{margin-top:1.1rem;font-size:1.04rem;line-height:1.4}
  .bio2{margin-top:.6rem}
  .links{bottom:1.1rem}
  .shelf{gap:1rem}
  .portrait{height:92px}
  body.inner .portrait{height:80px}
  .links{left:var(--gutter);right:auto;bottom:1.4rem}
  .loupe{width:142px;height:142px}
  body.inner .stage{padding-top:6.4rem}
  .strip{padding:1.1rem var(--gutter);font-size:.78rem}
  .strip .clock{position:static;transform:none}
  /* phones: the landing flows and scrolls like an inner page; the rule sits where the painting's horizon falls */
  body.landing{overflow:auto;overflow-x:hidden}
  body.landing .stage{height:auto;min-height:100vh;min-height:100svh;padding-top:54.5vh;padding-top:54.5svh;padding-bottom:1.4rem}
  body.landing .horizon{position:relative;top:auto}
  body.landing .cluster{position:relative;top:auto;left:auto;margin-left:var(--gutter);padding-bottom:0}
  body.landing .links{position:relative;bottom:auto;left:auto;margin:2rem 0 0 var(--gutter)}
  .list{margin-top:1.6rem}
  .work li{grid-template-columns:1fr;gap:.45rem;padding:1.3rem 0}
  .work-title,.post-link{font-size:1.38rem}
  .work-desc,.post-desc{font-size:1.12rem}
  .work-year{padding-top:0}
  .posts li{flex-direction:column;gap:.3rem;align-items:flex-start}
}
@media (max-height:780px){
  body.landing .bio{font-size:1.4rem;margin-top:1.4rem}
  body.landing .bio2{margin-top:.8rem}
  body.landing .portrait{height:112px}
  body.landing .name{font-size:clamp(2.8rem,5vw,4.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .scene,.loupe,.horizon,.name,nav,.bio,.links,.portrait,.list,.foot{animation:none;opacity:1;transform:none}
  body.landing .scene{opacity:.6}
  nav a::after{transition:none}
  .strip{animation:none;opacity:1}
}