:root {
  color: #1d211d;
  background: #f7f4ed;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --ink: #1d211d;
  --paper: #f7f4ed;
  --line: rgba(29, 33, 29, .18);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; min-width: 320px; min-height: 100vh; }
main { width: min(1460px, 100%); min-height: 100vh; margin: auto; padding: 0 34px; }

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 96px;
  border-bottom: 1px solid var(--line);
}

.logo { display: inline-flex; width: max-content; align-items: center; gap: 12px; color: inherit; font: 700 21px/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; text-decoration: none; }
.logo-mark { position: relative; display: block; width: 38px; height: 38px; border: 1.5px solid var(--ink); border-radius: 50%; background: #ffcf32; transition: transform .2s ease; }
.logo:hover .logo-mark { transform: rotate(12deg) scale(1.06); }
.logo-mark i { position: absolute; display: block; width: 11px; height: 11px; border: 1.5px solid var(--ink); background: #ef5c3e; }
.logo-mark i:nth-child(1) { top: 7px; left: 7px; border-radius: 50%; }
.logo-mark i:nth-child(2) { top: 7px; right: 6px; background: #5268d9; transform: rotate(45deg); }
.logo-mark i:nth-child(3) { right: 10px; bottom: 6px; width: 16px; height: 8px; background: #fff8e6; }
.masthead p { margin: 0; color: #656b63; font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; }
.project-count { justify-self: end; padding: 8px 12px; border: 1px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.intro { padding: clamp(54px, 8vw, 104px) 0 clamp(42px, 6vw, 76px); text-align: center; }
.eyebrow { margin: 0 0 20px; color: #db4c31; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.intro h1 { margin: 0; font: 700 clamp(46px, 7.8vw, 110px)/.92 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; letter-spacing: -.065em; }
.intro h1 em { color: #5268d9; font-style: normal; }

.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.project-card {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: block;
  aspect-ratio: 1.42;
  min-height: 430px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 90ms linear, box-shadow 140ms ease;
}
.project-card:hover { box-shadow: 8px 10px 0 var(--ink); }
.project-card:focus-visible { outline: 4px solid #5268d9; outline-offset: 4px; }
.branchroom { background: #cbe6cf; }
.patterns { background: #f6c92b; }
.travel { background: #b8dce5; }
.forest-war { background: #9fbb72; }
.excuses { background: #f1a38e; }
.card-number { position: absolute; top: 24px; right: 26px; z-index: 3; font: 700 12px/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }
.card-copy { position: absolute; z-index: 3; top: 26px; left: 28px; display: grid; width: min(60%, 390px); gap: 9px; }
.card-copy strong { font: 700 clamp(28px, 3.2vw, 50px)/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; letter-spacing: -.05em; }
.card-copy > span:last-child { max-width: 360px; color: rgba(29, 33, 29, .76); font-size: 14px; font-weight: 700; line-height: 1.45; }
.card-tag { width: max-content; padding: 6px 9px; border: 1px solid var(--ink); border-radius: 999px; background: rgba(255,255,255,.45); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.open-project { position: absolute; z-index: 4; right: 24px; bottom: 22px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; }
.open-project b { display: grid; width: 36px; height: 36px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 17px; transition: transform .18s ease; }
.project-card:hover .open-project b { transform: rotate(45deg) scale(1.08); }

.branch-scene { position: absolute; inset: 41% 4% 6% 6%; transform: translateZ(15px); }
.branch-line { position: absolute; display: block; height: 4px; border-radius: 4px; background: #315b45; transform-origin: left center; }
.line-a { top: 48%; left: 10%; width: 55%; transform: rotate(-21deg); }
.line-b { top: 49%; left: 10%; width: 61%; transform: rotate(16deg); }
.line-c { top: 34%; left: 57%; width: 27%; transform: rotate(42deg); }
.branch-node { position: absolute; z-index: 2; display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--ink); border-radius: 16px; background: #fffdf5; box-shadow: 4px 5px 0 rgba(29,33,29,.85); font: 800 17px/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; transition: transform .25s ease; }
.node-a { top: 35%; left: 2%; background: #ffcf32; }
.node-b { top: 4%; left: 52%; background: #f19578; transform: rotate(-5deg); }
.node-c { bottom: 1%; left: 58%; background: #b7c1f4; transform: rotate(4deg); }
.node-d { top: 6%; right: 3%; border-radius: 50%; background: #fffdf5; color: #27654b; }
.project-card:hover .node-b { transform: translateY(-7px) rotate(-8deg); }
.project-card:hover .node-c { transform: translateY(6px) rotate(7deg); }
.project-card:hover .node-d { transform: scale(1.08) rotate(8deg); }

.pattern-scene { position: absolute; inset: 40% 5% 4% 7%; transform: rotate(-5deg) translateZ(15px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.patterns:hover .pattern-scene { transform: rotate(0deg) scale(1.03) translateZ(15px); }
.tile { position: absolute; display: block; width: 19%; height: 27%; border: 2px solid var(--ink); box-shadow: 4px 5px 0 rgba(29,33,29,.85); }
.tile-1 { top: 4%; left: 10%; width: 27%; background: #ef5c3e; clip-path: polygon(0 0,100% 0,100% 50%,65% 50%,65% 100%,0 100%); }
.tile-2 { top: 3%; left: 40%; height: 38%; background: #5268d9; transform: rotate(4deg); }
.tile-3 { top: 3%; right: 10%; width: 22%; border-radius: 50%; background: #f7f4ed; }
.tile-4 { top: 40%; left: 2%; width: 33%; background: #347b4e; transform: rotate(-3deg); }
.tile-5 { top: 45%; left: 38%; background: #fff6de; }
.tile-6 { top: 43%; right: 9%; width: 28%; background: #7453a6; clip-path: polygon(0 0,100% 0,100% 100%,40% 100%,40% 52%,0 52%); }
.tile-7 { bottom: 1%; left: 20%; width: 32%; background: #f6c92b; }
.tile-8 { right: 15%; bottom: 0; height: 23%; border-radius: 50% 50% 6px 6px; background: #ef6a45; }

.travel-scene { position: absolute; inset: 43% 3% 5% 3%; transform: rotate(-2deg) translateZ(15px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.travel:hover .travel-scene { transform: rotate(0deg) scale(1.025) translateZ(15px); }
.travel-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6px 7px 0 rgba(29,33,29,.82)); }
.travel-route-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.travel-route-map path { fill: none; stroke: #db4c31; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 12 13; vector-effect: non-scaling-stroke; }
.travel-dot { position: absolute; display: block; width: 19px; height: 19px; border: 2px solid var(--ink); border-radius: 50%; background: #ef5c3e; box-shadow: 2px 3px 0 rgba(29,33,29,.8); transition: transform .25s ease; }
.dot-a { left: 10%; top: 59%; }
.dot-b { left: 42%; top: 42%; background: #ffcf32; }
.dot-c { left: 79%; top: 51%; background: #5268d9; }
.travel:hover .dot-a { transform: translateY(-6px) scale(1.12); }
.travel:hover .dot-b { transform: translateY(5px) scale(1.12); }
.travel:hover .dot-c { transform: translateY(-7px) scale(1.12); }
.travel-stamp { position: absolute; right: 2%; bottom: -1%; display: grid; width: 74px; height: 74px; place-content: center; border: 2px solid #db4c31; border-radius: 50%; color: #db4c31; background: #fff8e6; text-align: center; transform: rotate(9deg); box-shadow: 3px 4px 0 rgba(29,33,29,.75); }
.travel-stamp::before, .travel-stamp::after { content: ''; position: absolute; inset: 5px; border: 1px dashed #db4c31; border-radius: 50%; }
.travel-stamp::after { inset: 9px; border-style: solid; opacity: .35; }
.travel-stamp b { font: 700 25px/1 ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }
.travel-stamp small { font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.war-scene { position: absolute; inset: 39% 3% 3% 4%; overflow: hidden; transform: translateZ(15px); }
.mountain { position: absolute; bottom: 4%; display: block; width: 42%; height: 70%; border: 2px solid var(--ink); background: #667266; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mountain-a { right: -3%; }
.mountain-b { right: 25%; bottom: -8%; transform: scale(.75); background: #7d8274; }
.war-tree { position: absolute; bottom: 1%; z-index: 2; display: block; width: 17%; height: 67%; background: #28563a; clip-path: polygon(50% 0, 86% 35%, 68% 35%, 100% 74%, 60% 74%, 60% 100%, 40% 100%, 40% 74%, 0 74%, 32% 35%, 14% 35%); filter: drop-shadow(4px 5px 0 rgba(29,33,29,.75)); }
.tree-a { left: 1%; }
.tree-b { left: 17%; height: 52%; background: #397047; }
.tree-c { left: 33%; height: 79%; }
.war-castle { position: absolute; right: 8%; bottom: 0; z-index: 3; width: 29%; height: 43%; border: 2px solid var(--ink); background: #b9b09d; box-shadow: 5px 6px 0 rgba(29,33,29,.75); }
.war-castle::before, .war-castle::after { content: ''; position: absolute; bottom: 0; width: 31%; height: 140%; border: 2px solid var(--ink); background: #b9b09d; }
.war-castle::before { left: -18%; }
.war-castle::after { right: -18%; }
.war-castle b { position: absolute; z-index: 2; left: 38%; bottom: 0; width: 25%; height: 53%; border: 2px solid var(--ink); border-bottom: 0; border-radius: 50% 50% 0 0; background: #403936; }
.war-sword { position: absolute; z-index: 5; left: 49%; bottom: 8%; display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #ef5c3e; box-shadow: 3px 4px 0 var(--ink); font-size: 22px; font-style: normal; transition: transform .25s ease; }
.forest-war:hover .war-sword { transform: rotate(180deg) scale(1.1); }

.excuse-scene { position: absolute; inset: 40% 4% 4% 5%; transform: rotate(-2deg) translateZ(15px); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.excuses:hover .excuse-scene { transform: rotate(0deg) scale(1.025) translateZ(15px); }
.pm-bubble, .dev-bubble { position: absolute; display: grid; place-content: center; border: 2px solid var(--ink); color: var(--ink); font-style: normal; font-weight: 900; line-height: 1.05; text-align: center; box-shadow: 5px 6px 0 rgba(29,33,29,.84); }
.pm-bubble { top: 2%; left: 2%; width: 43%; height: 39%; border-radius: 50%; background: #fff8e6; font-size: clamp(11px,1.25vw,18px); transform: rotate(-5deg); }
.pm-bubble::after { content: ''; position: absolute; right: 3%; bottom: -15%; width: 24%; height: 34%; border-right: 2px solid var(--ink); background: #fff8e6; clip-path: polygon(0 0,100% 0,100% 100%); transform: rotate(19deg); }
.dev-bubble { right: 3%; bottom: 7%; width: 46%; height: 46%; border-radius: 16px; background: #586bd8; color: white; font-size: clamp(12px,1.35vw,20px); transform: rotate(4deg); }
.dev-bubble b { color: #ffda55; font-size: 1.35em; }
.scope { position: absolute; padding: 6px 9px; border: 1.5px solid var(--ink); background: #f6c92b; color: var(--ink); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: .08em; box-shadow: 2px 3px 0 var(--ink); }
.scope-a { left: 6%; bottom: 19%; transform: rotate(7deg); }
.scope-b { left: 27%; bottom: 2%; background: #fff8e6; transform: rotate(-5deg); }
.coffee { position: absolute; right: 5%; top: 0; display: grid; width: 43px; height: 43px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: #ffcf32; box-shadow: 3px 4px 0 var(--ink); font-size: 20px; font-style: normal; transition: transform .25s ease; }
.excuses:hover .coffee { transform: rotate(12deg) translateY(-5px); }

footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: clamp(70px, 10vw, 130px); min-height: 100px; border-top: 1px solid var(--line); color: #656b63; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
footer p { margin: 0; letter-spacing: 0; text-align: center; }
footer span:last-child { justify-self: end; }

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr 1fr; }
  .masthead p { display: none; }
  .projects { grid-template-columns: 1fr; }
  .project-card { min-height: 470px; aspect-ratio: 1.45; }
  .card-copy { width: 64%; }
}

@media (max-width: 560px) {
  main { padding: 0 14px; }
  .masthead { min-height: 78px; }
  .project-count { padding: 7px 9px; font-size: 9px; }
  .intro { text-align: left; }
  .intro h1 { font-size: clamp(42px, 14vw, 72px); }
  .project-card { min-height: 480px; aspect-ratio: auto; border-radius: 17px; }
  .project-card:hover { box-shadow: 5px 7px 0 var(--ink); }
  .card-copy { top: 22px; left: 21px; width: calc(100% - 74px); }
  .card-copy strong { font-size: 34px; }
  .branch-scene, .pattern-scene, .travel-scene, .war-scene, .excuse-scene { top: 45%; }
  .branch-node { width: 50px; height: 50px; border-radius: 13px; }
  .open-project { right: 18px; bottom: 17px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .project-card { transform: none !important; }
}