@import url('https://fonts.googleapis.com/css2?family=Doto:wght@700;900&family=Nunito:wght@400;500;600;700&family=Pathway+Extreme:wght@400;500;600;700&display=swap');

:root{
  --ink:#111;
  --muted:#666;
  --paper:#fff;
  --pad:clamp(24px,5.55vw,80px);
  --sketch:#111;
  --sketch-shadow:#c8c8c8;
  --footer-bg:#ececec;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:'Pathway Extreme',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.site > main{flex:1}

/* ---- Nav ---- */
.nav{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:40px var(--pad) 0;
  letter-spacing:4px;
  font-family:Doto,sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1;
}
.nav-links{display:flex;gap:63px}
.nav a{transition:opacity .2s ease,color .2s ease}
.nav a:hover{opacity:.55}
.nav-links a{color:#9a9a9a}
.nav-links a[aria-current="page"]{color:#111}

/* ---- Hero ---- */
.hero{
  text-align:center;
  max-width:1040px;
  margin:70px auto 0;
  padding:0 24px;
}
.hero h1{
  font-family:'Pathway Extreme',sans-serif;
  font-size:36px;
  line-height:1.15;
  margin:0 0 20px;
  font-weight:600;
  color:#7d7d7d;
}
.hero h1 span{color:#000}
.hero p{
  font-size:20px;
  line-height:30px;
  margin:0;
  color:#111;
}

/* ---- Work ---- */
.section-title{
  text-align:center;
  font-family:Doto,sans-serif;
  font-weight:700;
  font-size:20px;
  letter-spacing:2.4px;
  margin:56px 0 40px;
  color:#6f6f6f;
}

.projects{
  max-width:1260px;
  margin:0 auto;
  padding:0 var(--pad) 100px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:56px 48px;
}

.project{
  display:block;
  color:inherit;
  position:relative;
}

.project-frame{
  position:relative;
  background:#fff;
  padding:28px 28px 24px;
  border:5px solid var(--sketch);
  box-shadow:10px 10px 0 var(--sketch-shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
/* Sketch corner overshoots */
.project-frame::before{
  content:"";
  position:absolute;
  inset:-5px;
  pointer-events:none;
  background:
    linear-gradient(var(--sketch),var(--sketch)) 0 0 / 18px 5px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 100% 0 / 18px 5px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 0 100% / 18px 5px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 100% 100% / 18px 5px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 0 0 / 5px 18px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 100% 0 / 5px 18px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 0 100% / 5px 18px no-repeat,
    linear-gradient(var(--sketch),var(--sketch)) 100% 100% / 5px 18px no-repeat;
  transform:scale(1.04);
  transform-origin:center;
}

.project:hover .project-frame{
  transform:translate(-2px,-2px);
  box-shadow:14px 14px 0 var(--sketch-shadow);
}

.project-visual{
  aspect-ratio:5 / 3;
  overflow:hidden;
  background:#111;
  border:2px solid #111;
}
.project-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.project:hover .project-visual img{transform:scale(1.03)}
.friquick .project-visual{background:#fedd4d}

.project-meta{margin-top:22px}
.title-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:6px;
}
.title{
  font-size:32px;
  line-height:1.2;
  font-weight:700;
  flex:1;
}
.meta{
  font-size:16px;
  line-height:1.45;
  color:#222;
}
.arrow{
  flex:0 0 auto;
  width:42px;
  height:42px;
  background:#111;
  color:#fff;
  border-radius:2px;
  display:grid;
  place-items:center;
  font-size:22px;
  line-height:1;
  box-shadow:3px 3px 0 var(--sketch-shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.project:hover .arrow{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--sketch-shadow);
}

.circle .title{color:#ff365d}
.friquick .title{color:#057d20}
.provient .title{color:#452411}
.logo .title{color:#1d1d1d}

/* ---- Footer ---- */
.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px var(--pad);
  background:var(--footer-bg);
  border-top:1px solid #d7d7d7;
  font-family:Doto,sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:1.5px;
  color:#222;
}
.site-footer a{transition:opacity .2s ease}
.site-footer a:hover{opacity:.55}

/* ---- Case studies ---- */
.case-shell{background:#fff;min-height:100vh}
.case-shell.logo-case{background:#d7d7e2}
.case-nav{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid #eee;
  padding-top:22px;padding-bottom:22px;
}
.case-image{display:block;width:min(100%,1600px);height:auto;margin:0 auto}
.case-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:28px 24px 48px}
.btn{border:1px solid #111;border-radius:999px;padding:10px 18px;font-size:14px;background:#fff}
.btn:hover{background:#111;color:#fff}

@media (max-width:900px){
  .nav{padding-top:24px;font-size:14px;letter-spacing:2.5px}
  .nav-links{gap:24px}
  .hero{margin-top:52px}
  .hero h1{font-size:30px}
  .hero p{font-size:17px;line-height:26px}
  .section-title{font-size:16px;margin-top:42px;margin-bottom:28px}
  .projects{grid-template-columns:1fr;gap:36px;padding:0 24px 72px}
  .project-frame{padding:20px 20px 18px;box-shadow:8px 8px 0 var(--sketch-shadow)}
  .meta{font-size:14px}
  .title{font-size:26px}
  .arrow{width:36px;height:36px;font-size:18px}
  .site-footer{font-size:11px;letter-spacing:1px;padding:18px 20px;gap:12px}
  .case-nav{padding-bottom:18px}
  .case-actions{padding:18px 18px 36px}
}
@media (max-width:520px){
  .nav{font-size:10px;letter-spacing:2px}
  .nav-links{gap:16px}
  .hero{padding:0 18px}
  .hero h1{font-size:26px}
  .hero p{font-size:15px;line-height:23px}
  .projects{padding:0 18px 60px}
  .project-frame{padding:16px 16px 14px;border-width:4px}
  .site-footer{flex-direction:column;text-align:center;gap:8px}
}