/* Homepage redesign ("Field Notes"). Scoped to body.home so case study pages are untouched. */

.home{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(74,102,66,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,102,66,.12) 1px, transparent 1px);
  background-size:28px 28px;
}
.home .hm-page{ overflow-x:hidden; min-height:100vh; }
.home a:hover{ color:var(--moss-dark); }

@keyframes nameWiggle{ 0%,100%{ rotate:0deg; } 35%{ rotate:-4deg; } 70%{ rotate:2deg; } }
@keyframes hmDotPulse{
  0%{ box-shadow:0 0 0 0 rgba(74,102,66,.45); }
  100%{ box-shadow:0 0 0 10px rgba(74,102,66,0); }
}

/* ---------- Header ---------- */
.home header.site{
  position:static; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:none;
}
.home .nav{
  max-width:1240px; padding:28px clamp(20px,4vw,48px); gap:24px; flex-wrap:wrap;
}
.home .nav-name{ font-weight:500; font-size:19px; letter-spacing:-0.01em; color:var(--ink); }
.home .nav-name:hover{ color:var(--ink); }
.home .nav-links{ gap:28px; font-size:13px; letter-spacing:.06em; }
.home .nav-links a{ border-bottom:none; padding-bottom:0; color:inherit; }
.home .nav-links a::after{ display:none; }
.home .nav-links .btn{ border-bottom:none; color:inherit; }
.home .nav-links .btn:hover{ color:var(--moss-dark); }

/* ---------- Hero ---------- */
.hm-hero{
  max-width:1240px; margin:0 auto;
  padding:clamp(40px,7vw,88px) clamp(20px,4vw,48px) 72px;
}
.hm-hero-in{ max-width:1000px; }
.hm-eyebrow{
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:40px;
}
.hm-hero h1{
  font-weight:500; font-size:clamp(52px,8.6vw,120px); line-height:.98; letter-spacing:-0.02em;
  margin:0; color:var(--ink);
}
.hm-hero h1 .ln{ display:block; }
/* words are separated by real spaces in the markup, so no margin is needed */
.hm-hero h1 .w{ display:inline-block; transform-origin:50% 90%; }
.hm-hero h1 .w.name{ font-family:'Caveat Brush', cursive; font-weight:400; font-size:1.08em; letter-spacing:0; color:var(--moss-dark); }
.hm-hero h1 .w.key{ color:var(--ink); }
.hm-intro{
  font-size:clamp(18px,1.9vw,24px); line-height:1.6; max-width:760px; margin:44px 0 0;
  color:var(--ink-soft); text-wrap:pretty;
}
.hm-pillwrap{ display:flex; margin-top:32px; }
.hm-status{
  display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 14px; border-radius:999px;
  background:var(--paper-alt); border:1px solid var(--line); color:var(--moss-dark);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.hm-status .dot{
  width:6px; height:6px; border-radius:50%; background:var(--moss-dark);
  animation:hmDotPulse 1.8s ease-out infinite;
}

/* ---------- Selected work ---------- */
.hm-work{ max-width:1320px; margin:0 auto; padding:24px clamp(12px,2vw,24px) 72px; }
.hm-card{
  background:rgba(250,248,241,.82); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 24px 60px -32px rgba(33,40,32,.25);
  padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px) clamp(16px,2vw,32px);
}
.hm-headrow{
  position:relative; display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; padding-bottom:18px;
}
.hm-headrow::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--moss-dark);
}
.hm-h2{
  font-weight:500; font-size:clamp(40px,5vw,64px); line-height:1; margin:0; letter-spacing:-0.025em; color:var(--ink);
}
.hm-count{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--moss-dark); }

/* project rows (override the older .case grid layout) */
.home .case.hm-row{
  position:relative; display:flex; flex-wrap:wrap; gap:28px 48px; align-items:center;
  padding:40px 0; border-bottom:1px solid var(--line); color:var(--ink);
}
.home .case.hm-row:last-child{ border-bottom:1px solid var(--line); }
.home .case.hm-row:hover{ color:var(--ink); }
.hm-text{
  flex:1 1 420px; display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 16px;
  transition:transform .3s ease;
}
.home .hm-row .case-index{
  font-family:'Archivo', sans-serif; font-size:14px; font-weight:400; letter-spacing:0;
  color:var(--moss-dark); padding-top:12px; align-self:auto;
}
.home .hm-row .case-tag{
  display:block; margin:0; font-size:12px; font-weight:400; letter-spacing:.06em; color:var(--ink-soft);
}
.home .hm-row h3{
  font-weight:400; font-size:clamp(30px,3.6vw,46px); line-height:1.05; letter-spacing:-0.015em;
  margin:8px 0 12px; text-wrap:balance;
}
.hm-hl{
  background-image:linear-gradient(transparent 62%, rgba(127,161,115,.4) 62%);
  background-repeat:no-repeat; background-size:0% 100%; transition:background-size .5s ease;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.home .hm-row p{ margin:0; font-size:16px; line-height:1.55; color:var(--ink-soft); max-width:600px; text-wrap:pretty; }
.home .hm-row p.hm-proof{
  margin-top:12px; font-size:13px; letter-spacing:.04em; color:var(--moss-dark); font-weight:500;
}
.home .hm-row p.hm-nda{ margin-top:10px; font-size:14px; color:var(--ink-soft); }
.hm-nda a{ position:relative; z-index:3; color:var(--moss-dark); border-bottom:1px solid var(--moss-dark); }
.hm-nda a:hover{ color:var(--ink); border-color:var(--ink); }
/* card that holds a second link: the title link stretches over the whole row */
.hm-row-stretch{ cursor:pointer; }
.hm-stretch::after{ content:""; position:absolute; inset:0; z-index:1; }
.hm-stretch:focus-visible{ outline:none; }
.hm-stretch:focus-visible::after{ outline:2px solid var(--moss-dark); outline-offset:4px; border-radius:12px; }
.hm-more{ margin-top:16px; font-size:14px; font-weight:500; display:flex; gap:8px; align-items:center; }
.hm-more .arr{ color:var(--moss-dark); transition:transform .3s ease; }

/* taped, tilted thumbnail */
.home .case-media.hm-thumb{
  position:relative; flex:0 1 320px; aspect-ratio:4/3; display:block; isolation:auto;
}
.hm-tilt{
  position:absolute; inset:0; border-radius:12px; overflow:hidden; background:var(--paper-alt);
  transform:rotate(var(--rot,0deg)); transition:transform .4s cubic-bezier(.3,1.4,.5,1), box-shadow .4s ease;
}
.home .case-media .frame{
  position:absolute; inset:0; max-width:none; width:auto; aspect-ratio:auto; padding:0; border-radius:0;
  box-shadow:none; display:flex; align-items:center; justify-content:center;
}
.home .case-media .frame::after{ display:none; }
.home .case-media .frame:hover,
.home .case-media .frame:focus-visible{ transform:none !important; box-shadow:none; }
.home .case-media .frame:hover .thumb-illustration{ transform:none; }
.home .case-media .thumb-illustration{ width:78%; height:78%; }
.hm-tape{
  position:absolute; top:-12px; left:50%; width:90px; height:24px; margin-left:-45px;
  background:rgba(127,161,115,.35); transform:rotate(var(--tape,0deg)); z-index:2; pointer-events:none;
}
.hm-note{
  position:absolute; right:-10px; bottom:-18px; z-index:2; padding:10px 14px;
  background:var(--moss-dark); color:var(--paper); font-family:'Space Grotesk', sans-serif; font-size:19px; line-height:1.3;
  box-shadow:0 10px 20px -10px rgba(33,40,32,.45);
  transform:rotate(4deg) scale(0); transform-origin:bottom right;
  transition:transform .35s cubic-bezier(.3,1.5,.5,1);
}
.home .hm-row:hover .hm-text{ transform:translateX(12px); }
.home .hm-row:hover .hm-more .arr{ transform:translateX(12px); }
.home .hm-row:hover .hm-hl{ background-size:100% 100%; }
.home .hm-row:hover .hm-tilt{
  transform:rotate(0deg) scale(1.04); box-shadow:0 24px 40px -20px rgba(33,40,32,.5);
}
.home .hm-row:hover .hm-note{ transform:rotate(4deg) scale(1); }

/* ---------- Skills band ---------- */
.hm-skills{ background:var(--paper-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hm-skills-in{ max-width:1240px; margin:0 auto; padding:56px clamp(20px,4vw,48px); }
.hm-label{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--moss-dark); margin-bottom:20px;
}
.hm-pills{ display:flex; flex-wrap:wrap; gap:10px; }
.hm-skill-group + .hm-skill-group{ margin-top:32px; }
.hm-pill{
  display:inline-block; padding:10px 18px; border:1px solid #CBD8BF; border-radius:999px;
  font-size:15px; line-height:1.65; background:var(--paper); color:var(--moss-dark);
  transform:rotate(var(--r,0deg));
}

/* ---------- About ---------- */
.home #about.hm-about{
  max-width:1240px; margin:0 auto; padding:80px clamp(20px,4vw,48px) 96px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,360px),1fr)); gap:56px; align-items:start;
  background:none; border:none;
}
.hm-polaroid{
  position:relative; padding:14px 14px 56px; background:#fff; max-width:460px;
  box-shadow:0 14px 30px -16px rgba(33,40,32,.4); transform:rotate(-2.5deg);
  margin:clamp(0px,8vw,110px) 0 0; transition:transform 1s cubic-bezier(.3,1.4,.5,1);
}
.hm-polaroid .hm-tape{ top:-14px; width:110px; height:28px; margin-left:-55px; --tape:3deg; }
.hm-polaroid img{ display:block; width:100%; max-width:none; aspect-ratio:1104/712; object-fit:cover; }
.hm-polaroid figcaption{
  position:absolute; bottom:16px; left:18px; font-family:'Space Grotesk', sans-serif; font-size:22px; color:var(--ink);
}
.hm-about-body p{
  margin:0 0 18px; font-size:17px; line-height:1.6; color:var(--ink-soft); max-width:620px; text-wrap:pretty;
}
.hm-about-body .hm-h2{ margin-bottom:32px; }

/* ---------- Footer ---------- */
.home footer.hm-foot{ background:var(--moss-dark); color:var(--paper); padding:0; font-size:13px; }
.hm-foot-in{
  max-width:1240px; margin:0 auto; padding:32px clamp(20px,4vw,48px);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;
  text-transform:uppercase; letter-spacing:.06em;
}
.hm-foot-links{ display:flex; gap:24px; }
.home footer.hm-foot a{ color:var(--paper); border-bottom:none; }
.home footer.hm-foot a:hover{ color:var(--paper-alt); }

/* ---------- Motion (only when JS is running) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .home header.site{ opacity:0; transform:translateY(-12px); transition:opacity .6s ease, transform .6s ease; }
  .js .home.is-loaded header.site{ opacity:1; transform:none; }

  /* hidden state has no transition, so it resets instantly when the hero scrolls out */
  .js .hm-hero .fx{ opacity:0; transform:translateY(24px); }
  .js .hm-hero.hero-in .fx{
    opacity:1; transform:none;
    transition:opacity var(--fd) ease var(--fdl), transform var(--fd) cubic-bezier(.2,.8,.2,1) var(--fdl);
  }
  .js .hm-hero .w{ opacity:0; transform:translateY(.4em); }
  .js .hm-hero .w.name{ transform:translateY(.4em) scale(.85); }
  .js .hm-hero.hero-in .w{
    opacity:1; transform:none;
    transition:transform .8s cubic-bezier(.25,1.2,.5,1) var(--d), opacity .5s ease var(--d), color .6s ease calc(var(--d) + .5s);
  }
  .js .hm-hero.hero-in .w.name{ animation:nameWiggle .8s ease-in-out calc(var(--d) + .5s) 1 both; }
  .js .hm-hero.hero-in .w.key{ color:var(--moss-dark); }

  .js .hm-headrow::after{ width:0; }
  .js .hm-headrow.is-visible::after{ width:100%; transition:width 1.1s cubic-bezier(.6,.1,.2,1); }

  .js .home .case.hm-row.reveal{
    opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s ease; transition-delay:0ms;
  }
  .js .home .case.hm-row.reveal.in{ opacity:1; transform:none; }

  .js .hm-pill{ opacity:0; transform:translateY(16px) rotate(0deg); }
  .js .hm-skills.is-visible .hm-pill{
    opacity:1; transform:translateY(0) rotate(var(--r,0deg));
    transition:opacity .5s ease calc(var(--i) * .05s), transform .5s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .05s);
  }
  .js .hm-polaroid{ transform:rotate(4deg); }
  .js .hm-polaroid.is-visible{ transform:rotate(-2.5deg); }
}
@media (prefers-reduced-motion:reduce){
  .home *{ animation:none !important; transition:none !important; }
  .hm-hero h1 .w.key{ color:var(--moss-dark); }
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .home .case.hm-row{ display:flex; }
  .home .hm-row .case-index{ display:block; }
  .home .nav-links{ gap:20px; font-size:12px; }
}
@media (max-width:760px){
  .home .case-media.hm-thumb{ flex:1 1 100%; }
}