:root{
  --paper:#fbfbf9; --ink:#1c2427; --ink-soft:#4f5a5f; --ink-faint:#8a9397;
  --accent:#1f6a66; --rule:#e4e4df;
  --display:"Outfit",sans-serif; --body:"Source Sans 3",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:18px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--accent);color:#fff}

/* nav: transparent over the photo, solid once you scroll */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,4vw,48px);transition:background .3s,box-shadow .3s}
nav a{color:#fff;text-decoration:none;text-shadow:0 1px 10px rgba(10,25,30,.45)}
nav .brand{font-family:var(--display);font-weight:600;font-size:17px;opacity:0;transition:opacity .3s}
nav.scrolled .brand{opacity:1}
.nav-links{display:flex;gap:clamp(16px,3vw,28px);font-size:16px}
.nav-links a:hover{text-decoration:underline;text-underline-offset:5px}
nav.scrolled{background:rgba(251,251,249,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--rule)}
nav.scrolled a{color:var(--ink);text-shadow:none}

/* hero: the photo is the whole first screen, text kept small and low */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;background:#2c373b url('images/halfdome-web.jpg') center 42%/cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,25,30,.28) 0%,transparent 18%,transparent 55%,rgba(10,25,30,.55) 100%);pointer-events:none}
.hero-content{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px) clamp(40px,9vh,88px);color:#fff;text-shadow:0 1px 16px rgba(10,25,30,.45)}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(44px,8vw,88px);line-height:1;letter-spacing:-.02em}
.hero .role{font-size:clamp(18px,2vw,22px);margin-top:12px;opacity:.95}
.hero-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px;font-size:17px}
.hero-links a{color:#fff;text-decoration-color:rgba(255,255,255,.55)}
.hero-links a:hover{text-decoration-color:#fff}
.credit{position:absolute;z-index:1;right:clamp(16px,4vw,48px);bottom:14px;font-size:12.5px;color:rgba(255,255,255,.72)}

/* body: one calm column */
main{max-width:820px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
section{padding:56px 0 8px}
h2{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:-.01em;margin-bottom:18px}
b{font-weight:600}

.about{display:grid;grid-template-columns:190px 1fr;gap:40px;align-items:start;padding-top:64px}
.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.about p{color:var(--ink-soft);margin-bottom:16px}
.about b{color:var(--ink)}

.news{list-style:none}
.news li{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:4px 0;color:var(--ink-soft)}
.news span{color:var(--ink-faint);font-size:16px;padding-top:1px}

.papers{list-style:none}
.papers li{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:22px 0;border-top:1px solid var(--rule)}
.papers li:first-child{border-top:none;padding-top:4px}
.thumb{width:150px;height:150px;border-radius:8px;overflow:hidden;background:#eee}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb img.omnifield-thumb{transform:scale(1.1)}
.papers h3{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.35}
.papers h3 a{color:var(--ink);text-decoration:none}
.papers h3 a:hover{color:var(--accent)}
.authors{font-size:16px;color:var(--ink-soft);margin-top:6px}
.authors b{color:var(--ink)}
.venue{font-size:15.5px;color:var(--ink-faint);margin-top:2px}
.desc{font-size:16px;color:var(--ink-soft);margin-top:8px}
.sub{font-family:var(--display);font-weight:500;font-size:18px;margin:30px 0 10px}
.workshop{list-style:none}
.workshop li{font-size:16px;color:var(--ink-soft);margin-bottom:10px}
.workshop b{color:var(--ink)}

/* meadow: pixel scenery, bell, and the stag */
.meadow{position:relative;height:225px;margin-top:24px;overflow:hidden}
.scenery{position:absolute;left:0;bottom:0;image-rendering:pixelated}
/* the bell hangs from a chain on a wooden post; bottom is set from script.js so the post stands in the grass */
.bell-post{position:absolute;right:clamp(20px,8vw,120px);bottom:14px;z-index:4;width:60px;height:100px}
.post{position:absolute;inset:0;display:block}
.bell{position:absolute;left:0;top:28px;background:none;border:none;cursor:pointer;padding:0;line-height:0;transform-origin:50% 4%;transition:transform .15s}
.bell:hover{transform:rotate(-6deg)}
.bell:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.bell.ringing{animation:ring .7s ease}
@keyframes ring{0%{transform:rotate(0)}15%{transform:rotate(16deg)}35%{transform:rotate(-13deg)}55%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
.bell-hint{position:absolute;right:calc(100% + 4px);top:50px;white-space:nowrap;font-size:13px;color:var(--ink-faint);transition:opacity .5s}
.bell-hint.gone{opacity:0}
.stag{position:absolute;left:0;bottom:16px;z-index:3;background:url('images/stag_sprite.png') no-repeat;image-rendering:pixelated;opacity:0;pointer-events:none;will-change:transform}

footer{max-width:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:18px clamp(16px,4vw,48px) 22px;font-size:15px;color:var(--ink-faint);background:#e9ede4}

@media(max-width:700px){
  body{font-size:17px}
  .nav-links{gap:14px;font-size:15px}
  .about{grid-template-columns:1fr;gap:24px}
  .portrait{width:150px}
  .news li{grid-template-columns:1fr;gap:0;padding:6px 0}
  .papers li{grid-template-columns:1fr;gap:14px}
  .thumb{width:100%;height:180px}
  .credit{display:none}
}