:root{
  --ink:#10231e;
  --sand:#f4f0e8;
  --panel:#fffdf7;
  --pine:#b8c69f;
  --pine-dark:#5e755a;
  --line:rgba(16,35,30,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
}

/* Skip link — visible on focus for keyboard users */
.skip{
  position:absolute;left:-9999px;top:0;z-index:10;
  background:var(--ink);color:#fff;padding:12px 18px;
  font:600 13px/1 Arial,sans-serif;text-decoration:none;
}
.skip:focus{left:12px;top:12px}

.topbar{
  display:flex;align-items:center;gap:12px;
  padding:20px clamp(24px,7vw,96px);
  border-bottom:1px solid var(--line);
}
.mark{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:8px;
  background:var(--ink);color:var(--pine);
  font:400 22px/1 Georgia,serif;
}
.wordmark{font:600 12px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}

main{max-width:1120px;margin:0 auto;padding:0 clamp(24px,7vw,96px)}

.intro{padding:clamp(56px,10vw,120px) 0 clamp(30px,5vw,56px)}
.eyebrow{
  font:600 11px/1.2 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pine-dark);margin:0 0 22px;
}
.intro h1{
  font-weight:400;font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.05em;
  margin:0;max-width:820px;
}
.lede{
  font:400 clamp(17px,2vw,22px)/1.5 Arial,sans-serif;
  max-width:640px;margin:28px 0 0;color:#33473f;
}

.tools{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  padding-bottom:clamp(64px,10vw,120px);
}
.card{
  display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);border-radius:16px;
  padding:clamp(30px,3.6vw,48px);
  text-decoration:none;color:var(--ink);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--ink);
  box-shadow:0 18px 40px -24px rgba(16,35,30,.5);
}
.card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.num{font:600 11px/1 Arial,sans-serif;letter-spacing:.14em;color:var(--pine-dark)}
.card h2{
  font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.02;letter-spacing:-.04em;
  margin:26px 0 14px;
}
.card p{font:400 16px/1.62 Arial,sans-serif;margin:0;color:#33473f}
.go{
  margin-top:28px;
  font:600 13px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:12px;
}
.card:hover .go span{transform:translateX(4px)}
.go span{font-size:17px;transition:transform .16s ease}

footer{
  padding:26px clamp(24px,7vw,96px);
  border-top:1px solid var(--line);
  font:12px/1.5 Arial,sans-serif;color:var(--pine-dark);
}

@media(max-width:720px){
  .tools{grid-template-columns:1fr}
  .intro h1{font-size:clamp(38px,11vw,60px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.go span{transition:none}
  .card:hover{transform:none}
}