/* Type: Caveat (hand-written) for headings and notes, Courier Prime (typewriter) for body. */
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courierprime-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("fonts/courierprime-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* Brand colors (charcoal, ivory, bronze) warmed with bronze-family tints:
   cream paper instead of cool ivory, a coffee-dark instead of blue-grey charcoal. */
:root {
  --bn-charcoal: #24282B;
  --bn-ivory: #ECECE8;
  --bn-bronze: #AD8662;

  --paper: #F3EADC;
  --paper-hi: #FFF8EE;
  --paper-deep: #E8D9C2;
  --ink: #2A2420;
  --ink-soft: #6B5A4C;
  --dark: #2B231E;
  --dark-line: #4A3D33;
  --accent: var(--bn-bronze);
  --accent-soft: #D8B994;
  --terracotta: #C0643F;
  --skin: #EFC9A4;

  --hand: "Caveat", "Segoe Print", cursive;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--paper);
  /* warm paper grain + notebook dots */
  background-image:
    radial-gradient(rgba(120, 84, 52, 0.10) 1px, transparent 1.3px),
    radial-gradient(rgba(120, 84, 52, 0.05) 1px, transparent 1.4px);
  background-size: 26px 26px, 7px 7px;
  background-position: 0 0, 3px 5px;
  color: var(--ink);
  font-family: var(--type);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; }
h1, h2, h3, .kicker, .hint, .note, .bubble, .btn, .email, .annot-label, .count, .top nav a {
  font-family: var(--hand);
  font-weight: 700;
}
h1 { font-size: clamp(60px, 10vw, 128px); line-height: 0.95; margin: 0.1em 0 0.25em; }
h2 { font-size: clamp(46px, 6vw, 76px); line-height: 1; margin: 0 0 0.3em; }
h3 { font-size: 34px; line-height: 1; margin: 0.3em 0 0.2em; }
.dot { color: var(--accent); }

.defs { position: absolute; }

/* ---------- ink helpers ---------- */
.ink { filter: url(#wobble); overflow: visible; }
.stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stroke.thin { stroke-width: 2.2; }
.fill-skin { fill: var(--skin); }
.fill-hair { fill: var(--ink); }
.hair-lines { stroke: #5A4A3E; }
/* waving Nijam (hero) */
.fill-shirt { fill: var(--accent); }
.nijam .collar { stroke: var(--ink); }
.pupil { fill: var(--ink); }
.badge { fill: var(--paper-hi); stroke: var(--ink); stroke-width: 2; }
/* flexing chef (Di luar layar) */
.fill-tank { fill: #55704A; }
.tank-fold { stroke: #3B5133; }
.fill-hat { fill: var(--paper-hi); }
.shade { stroke: #A8774F; }
.bracelet { stroke-width: 4.5; }
.spark { stroke: var(--accent); stroke-width: 3; }
.mouth-fill { fill: #7A3E2C; }
.teeth { fill: var(--paper-hi); }
.blush { fill: var(--terracotta); opacity: 0.35; }

/* --len is each path's measured length, set in main.js */
.draw path, path.draw {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  opacity: 0; /* hides the round-cap dot before drawing starts */
  transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1), opacity .1s;
}
.is-drawn .draw path, .is-drawn path.draw, .draw.is-drawn path, path.draw.is-drawn { stroke-dashoffset: 0; opacity: 1; }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(255, 248, 238, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px dashed rgba(120, 84, 52, 0.25);
}
/* lockup keeps its clear space via padding; never stretched or rotated */
.logo { display: block; padding: 4px 0; line-height: 0; }
.logo img { height: 36px; width: auto; }
.top nav { display: flex; gap: clamp(14px, 3vw, 34px); }
.top nav a { text-decoration: none; font-size: 26px; line-height: 1; position: relative; }
.top nav a:hover { color: var(--accent); }

section { padding: clamp(56px, 9vw, 120px) clamp(16px, 5vw, 64px); position: relative; }

/* ---------- hero ---------- */
.hero {
  min-height: calc(100vh - 66px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}
.kicker { font-size: 30px; color: var(--ink-soft); margin: 0; }
.mark { position: relative; display: inline-block; color: var(--accent); }
.underline {
  position: absolute;
  left: -2%;
  bottom: -0.08em;
  width: 104%;
  height: 0.28em;
}
.underline path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.lede { max-width: 34em; font-size: 18px; }

.btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 26px 10px;
  font-size: 30px;
  text-decoration: none;
  background: var(--accent);
  color: var(--paper-hi);
  border: 3px solid var(--ink);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 5px 0 var(--ink);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.btn:hover { transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 7px 8px 0 var(--ink); }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }
.btn.small { font-size: 22px; padding: 2px 16px 6px; margin: 0; }
.btn.ghost { background: var(--paper-hi); color: var(--ink); }

.nijam { margin: 0; position: relative; justify-self: center; width: min(420px, 90%); cursor: pointer; }
.nijam svg { width: 100%; height: auto; display: block; }
#arm { transform-origin: 176px 230px; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-14deg); }
  20%, 40% { transform: rotate(8deg); }
}
.nijam.boop svg, .chef.boop svg { animation: boop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boop { 30% { transform: scale(1.06, .94) rotate(-3deg); } 60% { transform: scale(.97, 1.03) rotate(2deg); } }

.bubble {
  position: absolute;
  top: 2%;
  left: -6%;
  font-size: 28px;
  background: var(--paper-hi);
  border: 3px solid var(--ink);
  border-radius: 50% 46% 52% 44% / 54% 48% 52% 46%;
  padding: 6px 20px 10px;
  transform: rotate(-8deg);
  box-shadow: 3px 4px 0 var(--ink);
  transition: transform .2s;
}
.nijam:hover .bubble { transform: rotate(-3deg) scale(1.05); }

.doodle { position: absolute; pointer-events: none; }
.doodle .stroke { stroke-width: 3; }
.star { width: 56px; top: 14%; left: 46%; animation: float 6s ease-in-out infinite; }
.star .stroke { fill: var(--accent-soft); }
.spiral { width: 70px; bottom: 12%; left: 4%; animation: float 7s ease-in-out infinite reverse; }
.arrow { width: 110px; bottom: 10%; left: 40%; }
@keyframes float { 50% { transform: translateY(-14px) rotate(8deg); } }

/* ---------- projects ---------- */
.karya { background: var(--dark); color: var(--paper); padding-right: 0; padding-left: 0; }
.karya .section-head { padding: 0 clamp(16px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }
.karya .hint { color: var(--accent-soft); }
.hint { font-size: 24px; margin: 0; }
.count {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--accent-soft);
  border: 2px solid var(--accent-soft);
  border-radius: 50% 40% 55% 45%;
  padding: 0 8px;
}
.strip {
  display: flex;
  gap: 34px;
  overflow-x: auto;
  padding: 50px clamp(16px, 5vw, 64px) 60px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  cursor: grab;
}
.strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.card {
  flex: 0 0 min(320px, 80vw);
  scroll-snap-align: center;
  position: relative;
  background: var(--paper-hi);
  color: var(--ink);
  padding: 24px 24px 34px;
  border: 3px solid var(--ink);
  border-radius: 18px 6px 22px 8px / 8px 20px 6px 18px;
  box-shadow: 0 0 0 7px var(--paper), 8px 10px 0 7px rgba(0, 0, 0, .35);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1);
  user-select: none;
}
.card:hover { transform: rotate(0) translateY(-8px) scale(1.02); }
.c1 { --tilt: -3deg; } .c2 { --tilt: 2.5deg; } .c3 { --tilt: -1.5deg; } .c4 { --tilt: 3deg; } .c5 { --tilt: -2.5deg; }
.card .icon { width: 58px; height: 58px; }
.c1 .icon .stroke, .c3 .icon .stroke, .c5 .icon .stroke { stroke: var(--accent); }
.c2 .icon .stroke, .c4 .icon .stroke { stroke: var(--terracotta); }
.card p { font-size: 15px; margin: 0 0 10px; }
.card .tags { color: var(--ink-soft); font-size: 13px; }
.card a { font-weight: 700; font-size: 14px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.card a:hover { color: var(--accent); }
.note {
  position: absolute;
  right: -10px;
  bottom: -22px;
  background: var(--accent-soft);
  padding: 2px 14px 6px;
  font-size: 22px;
  transform: rotate(4deg);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
}

/* ---------- off screen: flexing chef ---------- */
.luar {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.luar h2 { color: var(--terracotta); }
.luar .hint { color: var(--ink-soft); }
.reps { font-size: 18px; }
.reps strong {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-family: var(--hand);
  font-size: 34px;
  line-height: 1;
  padding: 2px 10px 6px;
  background: var(--accent-soft);
  border: 2.5px solid var(--ink);
  border-radius: 50% 44% 52% 46%;
  transform: rotate(-4deg);
}
.reps strong.bump { animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: rotate(6deg) scale(1.35); } }
.chef { position: relative; margin: 0; justify-self: center; width: min(500px, 100%); cursor: pointer; }
#chef { width: 100%; height: auto; display: block; }
/* the flex itself is SMIL inside the SVG (rotations need local coordinates for the mirrored arm) */
.chef-bubble { top: 0; left: auto; right: 2%; transform: rotate(6deg); }
.chef:hover .chef-bubble { transform: rotate(2deg) scale(1.05); }
.label-hat { top: -6px; left: 2%; transform: rotate(-6deg); }
.annot-hat { top: 18px; left: 22%; width: 90px; }
.label-bicep { bottom: 26%; right: -4%; transform: rotate(4deg); color: var(--accent); }

/* ---------- about ---------- */
.tentang {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.tentang h2 { color: var(--accent); }
.symbol { position: relative; margin: 0; padding: 40px 30px; justify-self: center; }
.symbol img { width: clamp(150px, 20vw, 230px); height: auto; display: block; }
.annot { position: absolute; width: 110px; pointer-events: none; }
.annot .stroke { stroke-width: 2.6; }
.annot-gap { top: -48px; left: 2%; width: 92px; }
.annot-dot { bottom: -36px; right: -46px; width: 96px; }
.annot-label { position: absolute; font-size: 26px; color: var(--ink); white-space: nowrap; }
.label-gap { top: -72px; left: 30%; transform: rotate(-4deg); }
.label-dot { bottom: -66px; right: -40px; transform: rotate(3deg); color: var(--accent); }

/* ---------- draw pad ---------- */
.coret { max-width: 1000px; margin: 0 auto; }
.coret .hint { color: var(--ink-soft); }
.pad-wrap { margin-top: 24px; }
#pad {
  display: block;
  width: 100%;
  height: clamp(260px, 40vw, 420px);
  background: var(--paper-hi);
  border: 3px dashed var(--ink);
  border-radius: 14px 30px 12px 26px / 26px 12px 30px 14px;
  touch-action: none;
  cursor: crosshair;
}
.pad-tools { display: flex; gap: 12px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.swatch {
  width: 36px;
  height: 36px;
  border: 3px solid var(--ink);
  border-radius: 50% 44% 52% 46%;
  cursor: pointer;
  padding: 0;
  transition: transform .15s;
}
.swatch[data-color="#2A2420"] { background: #2A2420; }
.swatch[data-color="#AD8662"] { background: #AD8662; }
.swatch[data-color="#C0643F"] { background: #C0643F; }
.swatch[data-color="#6B8E5A"] { background: #6B8E5A; }
.swatch.active { transform: scale(1.2) rotate(-8deg); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }

/* ---------- contact ---------- */
.kontak { text-align: center; background: var(--accent); color: var(--ink); }
.kontak .kicker { color: var(--ink); }
.email {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding: 10px 28px;
  font-size: clamp(34px, 6vw, 72px);
  text-decoration: none;
  word-break: break-all;
}
.email .circle { position: absolute; inset: -8px -14px; width: calc(100% + 28px); height: calc(100% + 16px); }
.email .circle path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset .7s ease;
}
.email:hover .circle path, .email:focus-visible .circle path { stroke-dashoffset: 0; }

footer {
  background: var(--dark);
  color: var(--accent-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(16px, 5vw, 64px);
  font-size: 14px;
}
footer img { height: 26px; width: auto; }
footer p { margin: 0; }

a:focus-visible, button:focus-visible { outline: 3px dashed var(--terracotta); outline-offset: 4px; }

/* ---------- small screens ---------- */
@media (max-width: 780px) {
  .hero { grid-template-columns: 1fr; padding-top: 32px; }
  .nijam { width: min(300px, 80%); grid-row: 1; }
  .luar { grid-template-columns: 1fr; }
  .chef { width: min(380px, 100%); margin-top: 48px; }
  .chef .chef-bubble { left: auto; right: 0; top: -44px; }
  .label-hat { top: -40px; font-size: 22px; }
  .annot-hat { top: -12px; left: 18%; width: 70px; }
  .label-bicep { right: 0; bottom: 8%; font-size: 22px; }
  .bubble { font-size: 22px; left: -10%; }
  .logo img { height: 28px; }
  .top nav { gap: 12px; }
  .top nav a { font-size: 21px; }
  .star { left: auto; right: 6%; top: 4%; }
  .arrow, .spiral { display: none; }
  .tentang { grid-template-columns: 1fr; }
  .symbol { margin-top: 60px; }
  .annot-dot, .label-dot { right: -10px; }
}
@media (max-width: 420px) {
  .top nav a:nth-child(3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .draw path, path.draw { stroke-dashoffset: 0; opacity: 1; }
}