:root{
  --paper: #efead9;
  --paper-light: #f7f4e9;
  --white: #fffdf7;
  --ink: #1b2e2a;
  --ink-soft: #46564f;
  --moss: #3f6b4a;
  --moss-dark: #2c4d35;
  --teal-deep: #17494c;
  --teal-darker: #0e3335;
  --signal: #b8901f;
  --line: rgba(27,46,42,0.18);
  --line-strong: rgba(27,46,42,0.32);
  --radius: 3px;
  --ease: cubic-bezier(.65,0,.35,1);
  --paper-line: rgba(27,46,42,0.07);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory;height:100%;}

body{
  margin:0;background:var(--paper);color:var(--ink);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-1px -1px;
  font-family:'Roboto',sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;position:relative;
}

body.lock{overflow:hidden;}

body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit;}
button{font-family:inherit;}

.eyebrow{
  font-family:'Roboto Condensed',sans-serif;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;font-size:.72rem;color:var(--ink-soft);
}

.wrap{max-width:1100px;margin:0 auto;padding:0 28px;}

/* ============ HERO — full viewport, rotating photo ============ */
.hero-full{position:relative;min-height:100vh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;}
.hero-photos{position:absolute;inset:0;z-index:0;}
.hero-photo{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--focus, center);display:block;}
.hero-photo.active{opacity:1;}
.hero-photo--1{background:radial-gradient(120% 120% at 20% 20%, #3f6b4a 0%, #17494c 55%, #0e3335 100%);}
.hero-photo--2{background:radial-gradient(120% 120% at 80% 30%, #17494c 0%, #1b2e2a 60%, #0e3335 100%);}
.hero-photo--3{background:radial-gradient(120% 120% at 30% 80%, #b8901f 0%, #2c4d35 55%, #17494c 100%);}
.hero-photo--4{background:radial-gradient(120% 120% at 70% 75%, #46564f 0%, #17494c 55%, #1b2e2a 100%);}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg, rgba(14,20,18,.32) 0%, rgba(14,20,18,.42) 40%, rgba(14,20,18,.78) 100%);}

.hero-content{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:64px 28px 34px;}
.hero-text .eyebrow{color:var(--paper-light);opacity:.85;margin-bottom:20px;}
.hero-statement{
  font-family:'Fraunces',serif;font-style:italic;font-optical-sizing:auto;font-weight:500;
  line-height:1.03;letter-spacing:-.01em;font-size:clamp(2.3rem,6.6vw,5.2rem);
  color:var(--white);text-shadow:0 4px 26px rgba(0,0,0,.25);margin:0 0 30px;max-width:15ch;
}
.roles{display:flex;flex-wrap:wrap;gap:10px;}
.chip{font-family:'Roboto Condensed',sans-serif;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;border:1px solid var(--line-strong);border-radius:100px;color:var(--ink-soft);}
.chip--onphoto{border-color:rgba(255,253,247,.5);color:var(--paper-light);}

.hero-journey{max-width:900px;width:100%;margin:40px auto 0;}
.hero-journey svg{width:100%;height:auto;display:block;overflow:visible;}
.journey-path{fill:none;stroke:rgba(255,253,247,.85);stroke-width:2;stroke-linecap:round;}
.journey-dot{fill:var(--signal);stroke:var(--paper-light);stroke-width:1.5;cursor:default;}
.journey-label{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;fill:var(--paper-light);text-transform:uppercase;}

.scroll-cue{align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--paper-light);text-decoration:none;opacity:.85;font-family:'Roboto Condensed',sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin-top:26px;}
.scroll-chevron{font-size:1.4rem;line-height:1;animation:bounce 2.2s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

@media (max-width:640px){
  .hero-content{padding:52px 20px 26px;}
  .hero-journey{margin-top:20px;}
}

/* ============ FIELD INDEX — full-viewport, precise fractional grid ============ */
.index{
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:56px 0 40px;
  border-top:1px solid var(--line);
  position:relative;z-index:2;
  scroll-snap-align:start;scroll-snap-stop:always;
}
.index-label{margin:0 0 22px;}

.index-grid{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:minmax(120px,1fr);
  gap:16px;
}

/* fractional spans: 6/12 = half, 4/12 = third, 3/12 = quarter.
   Compound selectors (.card.g-span-6) deliberately — a plain .g-span-6
   class was getting cancelled by .card's `all:unset` below, since both
   have equal specificity and .card came later in source order. This is
   the classic "utility class silently loses the cascade" bug; compound
   selectors fix it for good regardless of where anything is declared. */
.card.g-span-6{grid-column:span 6;}
.card.g-span-4{grid-column:span 4;}
.card.g-span-3{grid-column:span 3;}

/* Each card = a scrim gradient (for text legibility) layered over a photo.
   --photo is unset by default, so --photo-fallback (a category-tinted
   gradient) shows through. To drop in a real photo later, just add an
   inline style to that specific card in the HTML, nothing else changes:
     style="--photo:url('images/story.jpg')"                            */
.card{
  all:unset;box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;cursor:pointer;
  padding:22px 22px 18px;
  border:1px solid var(--line);border-top-width:4px;border-radius:var(--radius);
  background-image:linear-gradient(var(--scrim)), var(--photo, var(--photo-fallback));
  background-size:cover;background-position:center;
  color:var(--paper-light);
  opacity:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover, .card:focus-visible{transform:translateY(-4px);box-shadow:0 14px 30px rgba(27,46,42,.16);border-color:var(--line-strong);}
.card:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}

.card--moss{
  border-top-color:var(--moss);
  --scrim:160deg, rgba(44,77,53,.66), rgba(27,46,42,.85);
  --photo-fallback:linear-gradient(135deg, var(--moss) 0%, var(--moss-dark) 100%);
}
.card--teal{
  border-top-color:var(--teal-deep);
  --scrim:160deg, rgba(20,63,66,.66), rgba(14,51,53,.87);
  --photo-fallback:linear-gradient(135deg, var(--teal-deep) 0%, var(--teal-darker) 100%);
}
.card--ext{
  border-top-color:var(--signal);
  --scrim:160deg, rgba(27,46,42,.5), rgba(20,33,30,.8);
  --photo-fallback:linear-gradient(135deg, #3a4a44 0%, var(--ink) 100%);
}
.card--neutral{
  border-top-color:var(--ink-soft);
  --scrim:160deg, rgba(27,46,42,.45), rgba(20,33,30,.72);
  --photo-fallback:linear-gradient(135deg, #3a4a44 0%, var(--ink) 100%);
}

.card-num{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:.78rem;color:var(--signal);letter-spacing:.03em;}
.card-body{flex:1 1 auto;margin:12px 0;}
.card-title{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;margin:0 0 8px;color:var(--white);}
.card-desc{font-size:.84rem;color:rgba(255,253,247,.82);margin:0;max-width:34ch;line-height:1.4;}
.card-marker{align-self:flex-end;font-size:1rem;color:rgba(255,253,247,.78);transition:color .25s var(--ease), transform .25s var(--ease);}
.card:hover .card-marker,.card:focus-visible .card-marker{color:var(--signal);}
.card[data-ext="1"]:hover .card-marker{transform:translate(2px,-2px);}

.card--feature{padding:30px 26px 24px;}
.card--feature .card-title{font-size:clamp(1.4rem,2.6vw,2rem);}
.card--feature .card-desc{font-size:.94rem;max-width:44ch;}

@keyframes cardReveal{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width:640px){
  html{scroll-snap-type:none;}
  .hero-full,.index{scroll-snap-align:none;}
  .index{min-height:auto;padding:44px 0 30px;}
  .index-grid{display:grid;grid-template-columns:1fr;gap:14px;}
  .card.g-span-6,.card.g-span-4,.card.g-span-3{grid-column:span 1;}
  .card--feature{padding:26px 22px 20px;}
}

/* ============ FOOTER ============ */
.footer{margin-top:auto;padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'Roboto Condensed',sans-serif;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}

/* ============ SWIPE PANELS ============ */
.backdrop{position:fixed;inset:0;background:rgba(14,20,18,.4);opacity:0;pointer-events:none;transition:opacity .4s var(--ease);z-index:40;}
.backdrop.active{opacity:1;pointer-events:auto;}
.panel{position:fixed;inset:0;transform:translateY(100%);transition:transform .55s var(--ease);z-index:50;overflow-y:auto;overflow-x:hidden;color:var(--white);}
.panel.open{transform:translateY(0);}
.panel[data-cat="moss"]{background:var(--moss-dark);}
.panel[data-cat="teal"]{background:var(--teal-darker);}
.panel[data-cat="paper"]{background:var(--paper-light);color:var(--ink);}
.panel-inner{max-width:760px;margin:0 auto;padding:90px 28px 100px;overflow-wrap:break-word;}
.panel-eyebrow{font-family:'Roboto Condensed',sans-serif;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;opacity:.75;margin-bottom:18px;}
.panel h2{font-family:'Fraunces',serif;font-weight:500;font-style:italic;font-size:clamp(1.8rem,4.2vw,2.9rem);line-height:1.08;margin:0 0 28px;max-width:18ch;overflow-wrap:break-word;}
.panel p.lead{font-size:1.02rem;line-height:1.65;max-width:58ch;opacity:.92;margin-bottom:36px;}
.panel-close{all:unset;position:fixed;top:22px;right:28px;font-family:'Roboto Condensed',sans-serif;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:10px 14px;z-index:51;color:inherit;}
.panel-close:focus-visible{outline:2px solid var(--signal);}
.panel-close::before{content:"× close";}
.record{border-top:1px solid rgba(255,255,255,.18);padding:20px 0;}
.panel[data-cat="paper"] .record{border-top-color:var(--line-strong);}
.record:last-child{border-bottom:1px solid rgba(255,255,255,.18);}
.panel[data-cat="paper"] .record:last-child{border-bottom-color:var(--line-strong);}
.record-meta{font-family:'Roboto Condensed',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:6px;}
.record h3{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;margin:0 0 8px;}
.record p{font-size:.88rem;line-height:1.55;opacity:.85;margin:0;max-width:58ch;}
.contact-line{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(1.6rem,4vw,2.4rem);}
.contact-line a{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:6px;}
.placeholder-flag{display:inline-block;margin-top:26px;font-family:'Roboto Condensed',sans-serif;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--signal);opacity:.9;}

@media (prefers-reduced-motion: reduce){
  .panel,.backdrop,.card,.card-mystery,.card-marker,.hero-photo,.scroll-chevron,.journey-path,.journey-dot,.journey-label{transition:none !important;animation:none !important;}
  .card,.card-mystery{opacity:1 !important;transform:none !important;}
  html{scroll-behavior:auto;scroll-snap-type:none;}
  .hero-full,.index{scroll-snap-align:none;}
}
@media (max-width:480px){ .panel h2{max-width:none;} }

/* My Story Layout */
.panel-inner--wide{max-width:1080px;}

.story-body{
  display:grid;
  grid-template-columns:minmax(30px,1fr) minmax(0,44ch) minmax(30px,1fr);
  column-gap:40px;align-items:start;
}
.story-body > p{
  grid-column:2;
  font-size:1rem;line-height:1.75;margin:0 0 22px;opacity:.93;
  overflow-wrap:break-word;
}
.story-figure{
  width:100%;max-width:210px;
  padding:12px;background:var(--white);box-shadow:0 12px 26px rgba(0,0,0,.24);
  transform:rotate(var(--rot,0deg));
  grid-row:span 2;align-self:center;
}
.story-figure .figure-photo{
  width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;
  background-image:var(--photo, var(--photo-fallback));display:block;
}
.story-figure--left{grid-column:1;justify-self:end;margin:0 0 22px 0;}
.story-figure--right{grid-column:3;justify-self:start;margin:0 0 22px 0;}

@media (max-width:900px){
  .story-body{grid-template-columns:1fr;}
  .story-body > p{grid-column:1;max-width:44ch;margin-left:auto;margin-right:auto;}
  .story-figure{grid-column:1;justify-self:center;max-width:190px;margin:0 auto 24px;grid-row:auto;}
}

/* Publications Layout */
.profile-links{display:flex;flex-wrap:wrap;gap:10px;margin:-6px 0 34px;}
.profile-link{
  font-family:'Roboto Condensed',sans-serif;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:100px;
  color:var(--paper-light);text-decoration:none;transition:border-color .2s var(--ease), background .2s var(--ease);
}
.profile-link:hover, .profile-link:focus-visible{border-color:var(--signal);background:rgba(255,255,255,.07);}

.panel-subheading{
  font-family:'Roboto Condensed',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.8rem;opacity:.7;margin:0 0 4px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
}
.panel-subheading:first-of-type{padding-top:0;border-top:none;}
.panel[data-cat="paper"] .panel-subheading{border-top-color:var(--line-strong);}

.record--thumb{display:flex;gap:16px;align-items:flex-start;}
.record-thumb-img{
  width:56px;height:76px;flex:0 0 auto;background-size:cover;background-position:center;
  background-image:var(--photo, var(--photo-fallback));box-shadow:0 6px 14px rgba(0,0,0,.3);
}
.record-thumb-body{flex:1 1 auto;}

/* Book Recommendations Layout */
.record--book{display:flex;align-items:center;gap:22px;}
.record--book:nth-child(odd){flex-direction:row;}
.record--book:nth-child(even){flex-direction:row-reverse;}
.record-book-thumb{
  width:66px;height:96px;flex:0 0 auto;background-size:cover;background-position:center;
  background-image:var(--photo, var(--photo-fallback));box-shadow:0 10px 20px rgba(0,0,0,.32);
}
.record--book:nth-child(odd) .record-book-thumb{transform:rotate(-4deg);}
.record--book:nth-child(even) .record-book-thumb{transform:rotate(3deg);}
.record--book .record-book-body{flex:1 1 auto;}

/* CV Layout */
.cv-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 40px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
}
.cv-stat{background:var(--teal-darker);padding:18px 16px;}
.cv-stat-figure{
  display:block;font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.3rem,2.4vw,1.65rem);
  line-height:1;white-space:nowrap;color:var(--signal);margin-bottom:10px;
}
.cv-stat-label{
  display:block;font-family:'Roboto Condensed',sans-serif;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.4;opacity:.75;
}
#panel-cv .panel-subheading{scroll-margin-top:24px;}
.record a{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px;}
.record a:hover,.record a:focus-visible{color:var(--signal);}

@media (max-width:640px){
  .cv-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Publications List */
.stats-source{font-size:.78rem;opacity:.65;margin:-28px 0 30px;}
.stats-source a{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px;}
#panel-publications .panel-subheading{scroll-margin-top:24px;margin-top:22px;}
.pub-count{font-weight:400;opacity:.7;margin-left:6px;}
.record--pub{padding:14px 0;}
.record--pub h3{font-size:1rem;line-height:1.35;margin:0 0 6px;}
.record--pub h3 a{text-decoration:none;}
.record--pub h3 a:hover,.record--pub h3 a:focus-visible{text-decoration:underline;color:inherit;}
.record--pub .pub-authors{font-size:.8rem;line-height:1.5;opacity:.7;margin:0 0 3px;}
.pub-self{font-weight:500;color:var(--white);white-space:nowrap;}
.record--pub .pub-venue{font-size:.82rem;font-style:italic;opacity:.85;}
.pub-more{border-top:1px solid rgba(255,255,255,.18);}
.pub-more summary{
  list-style:none;cursor:pointer;display:inline-block;margin:16px 0;
  font-family:'Roboto Condensed',sans-serif;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;
  padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:100px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.pub-more summary::-webkit-details-marker{display:none;}
.pub-more summary::after{content:" ↓";}
.pub-more[open] summary{display:none;}
.pub-more summary:hover,.pub-more summary:focus-visible{border-color:var(--signal);background:rgba(255,255,255,.07);}

/* Book Recommendations Categories */
#panel-books .panel-subheading{scroll-margin-top:24px;margin-top:22px;}
.subheading-tag{font-weight:400;opacity:.7;margin-right:10px;}
.subheading-tag::after{content:" /";}
.book-group .record:last-child{border-bottom:none;}