/* Fallback font dengan metrik disamakan (nilai dari pujayana.com/next-font) agar font swap tidak menggeser layout. */
@font-face { font-family: "Inter Fallback"; src: local(Arial); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local(Arial); ascent-override: 75.79%; descent-override: 22.29%; line-gap-override: 0%; size-adjust: 134.59%; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"); ascent-override: 117.94%; descent-override: 36.93%; line-gap-override: 0%; size-adjust: 83.94%; }

/* Tokens: port dari pujayana.com. Tema diatur script di <head> berdasarkan jam Bali. */
:root, :root[data-theme=dark] {
  --color-bg: #0a0e14;
  --color-card: #111418;
  --color-card-border: #ffffff14;
  --color-fg: #f4f2ed;
  --color-muted: #9a968c;
  --color-muted-strong: #c7c3b8;
  --color-hairline: #ffffff17;
  --color-accent: #ff7a3c;
  --color-on-accent: #0a0e14;
  --shadow: inset 0 1px #ffffff0a, 0 40px 90px -28px #0000008c, 0 12px 32px -12px #00000059;
  color-scheme: dark;
}
:root[data-theme=light] {
  --color-bg: #f3ece0;
  --color-card: #fffdf8;
  --color-card-border: #0a0a0a14;
  --color-fg: #141312;
  --color-muted: #6f6a62;
  --color-muted-strong: #2b2926;
  --color-hairline: #0a0a0a1a;
  --color-accent: #c4491a;
  --color-on-accent: #fff;
  --shadow: inset 0 1px #fffc, 0 32px 70px -22px #46280a33, 0 10px 24px -10px #46280a1f;
  color-scheme: light;
}
:root {
  --font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Base */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
html {
  background: var(--color-bg);
  color: var(--color-fg);
  font: 16px/1.5 var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  transition: background-color .5s, color .5s;
}
body { background: var(--color-bg); color: var(--color-fg); }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
section[id] { scroll-margin-top: 24px; }

/* Type scale */
.t-display { font: 400 clamp(48px, 6.4vw, 84px)/1.02 var(--font-serif); letter-spacing: -.02em; }
.t-h1 { font: 400 clamp(28px, 3.4vw, 38px)/1.15 var(--font-serif); letter-spacing: -.01em; }
.t-h2 { font-size: clamp(18px, 1.4vw, 20px); font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.t-body-l { color: var(--color-muted-strong); font-size: clamp(15px, 1.05vw, 16px); line-height: 1.72; }
.t-body { color: var(--color-muted); font-size: 14px; line-height: 1.62; }
.t-label { font: 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.mono { font: 10px/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); }

/* Links & garis */
.prose-link { position: relative; padding: 0 2px; color: var(--color-accent); white-space: nowrap; transition: color .24s; }
.prose-link::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px; background: currentColor; opacity: .55; transition: opacity .24s; }
.prose-link:hover::after { opacity: 1; }
.link-underline { position: relative; display: inline-block; color: inherit; }
.link-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.link-underline:hover::after, a:hover > .link-underline::after { transform: scaleX(1); }
.hairline { height: 1px; background: var(--color-hairline); }

.card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: background .5s, border-color .5s, box-shadow .5s;
}

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 40px 16px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }

/* Profil (aside) */
.photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Selalu gelap seperti foto, agar teks putih tetap terbaca walau foto belum ada. */
  background: radial-gradient(90% 70% at 25% 15%, #ff7a3c24, transparent 60%), linear-gradient(165deg, #1b2028, #0a0e14);
}
:root[data-theme=light] .photo { background: radial-gradient(90% 70% at 25% 15%, #d9511e33, transparent 60%), linear-gradient(165deg, #8c7d68, #3b332b); }
.photo::before { content: "PY"; content: "PY" / ""; position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 180px/1 var(--font-serif); color: #ffffff12; }
:root[data-theme=light] .photo::before { color: #ffffff1f; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #0000008c, #0000 50%); pointer-events: none; }
.photo-meta { position: absolute; z-index: 1; left: 20px; right: 20px; font: 10px/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.photo-meta.top { top: 20px; color: #ffffffd9; }
.photo-meta.bottom { bottom: 20px; color: #ffffffbf; }
.photo-meta .clock { display: block; margin-top: 4px; color: #ffffff8c; }

.profile-body { padding: 24px; }
.profile-body h1 { margin-bottom: 8px; }
.profile-body .t-label { margin-bottom: 12px; }
.profile-body .t-body-l { margin-bottom: 20px; }
.profile-body .hairline { margin-bottom: 20px; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 18px; }
.links a { padding-block: 6px; } /* target sentuh lebih besar; margin sekitar dikurangi 6px */
.links a.link-underline::after { bottom: 4px; }
.links a { font: 11px/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted-strong); }

/* Artikel */
article > section { padding: 48px 24px 0; }
article > section:first-child { padding-top: 32px; }
article > section > .t-label { margin-bottom: 24px; }
article > section:first-child > .t-label { margin-bottom: 16px; }
.t-body-l + .t-body-l { margin-top: 20px; }
blockquote { margin-top: 24px; font: italic 400 22px/1.375 var(--font-serif); color: var(--color-muted-strong); }
.about .hairline { margin-top: 32px; }

.entries > li + li { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--color-hairline); }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.entry-head .mono { flex-shrink: 0; }
.org { font-size: 13px; color: var(--color-accent); margin: 4px 0 12px; }
.org span { color: var(--color-muted); }
.tags { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; }

@media (hover: hover) { a:hover > svg { transform: translateX(4px); } }

.t-label.sub-label { margin: 40px 0 8px; }
.others li { padding: 10px 0; border-top: 1px solid var(--color-hairline); }
.others li:first-child { border-top: 0; }
.others b { font-weight: 500; color: var(--color-fg); }
.others .mono { white-space: nowrap; }
.others a { color: var(--color-accent); }

.skills > li + li { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-hairline); }
.skill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.skill-head h3 { font: 400 11px/1.5 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--color-fg); }
.skill-head span { font-size: 11px; color: var(--color-muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { padding: 4px 12px; border: 1px solid var(--color-card-border); border-radius: 999px; background: var(--color-card); font: 11px/1.5 var(--font-mono); letter-spacing: .025em; color: var(--color-muted-strong); }

.contact .t-h1 { margin-bottom: 16px; }
.contact .t-body-l { margin-bottom: 24px; }
.email { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; color: var(--color-accent); }
.email svg { width: 22px; height: 14px; flex-shrink: 0; transition: transform .3s; }
.contact .links { margin: 10px 0; }

footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 48px; padding: 28px 24px; border-top: 1px solid var(--color-hairline); }

@media (min-width: 640px) {
  main { padding: 56px 24px; }
  .profile-body { padding: 28px 32px; }
  article > section { padding: 56px 40px 0; }
  article > section:first-child { padding-top: 40px; }
  blockquote { font-size: 24px; }
  .email { font-size: 20px; }
  footer { padding: 28px 40px; }
}
@media (min-width: 1024px) {
  main { padding: 64px 40px; }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
  .grid > header { grid-column: span 5; }
  .grid > article { grid-column: span 7; }
  .profile { position: sticky; top: 40px; }
}

/* Splash: hanya aktif bila JS menambah .intro di <html>; animasi CSS selalu selesai sendiri. */
@media (prefers-reduced-motion: no-preference) {
  .intro body::before { content: ""; position: fixed; inset: 0; z-index: 100; background: var(--color-bg); opacity: 0; visibility: hidden; pointer-events: none; animation: splash-out .5s cubic-bezier(.22, 1, .36, 1) .6s both; }
  .intro body::after { content: ""; position: fixed; z-index: 101; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--color-accent); opacity: 0; pointer-events: none; animation: splash-dot 1.1s cubic-bezier(.16, 1, .3, 1) both; }
  .intro main { animation: splash-in .8s cubic-bezier(.22, 1, .36, 1) .6s both; }
}
@keyframes splash-out { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes splash-dot {
  0% { opacity: 0; transform: scale(.15); }
  45% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes splash-in { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; transition: none; }
}

/* Print */
@media print {
  :root, :root[data-theme] {
    --color-bg: #f3ece0;
    --color-card: #fffdf8;
    --color-card-border: #0a0a0a14;
    --color-fg: #141312;
    --color-muted: #6f6a62;
    --color-muted-strong: #2b2926;
    --color-hairline: #0a0a0a1a;
    --color-accent: #c4491a;
    color-scheme: light;
  }
  body::before, body::after, .photo { display: none !important; }
  main { animation: none !important; max-width: none; padding: 0; }
  .grid { display: block; }
  .card { box-shadow: none; border: 0; border-radius: 0; }
  .profile { position: static; }
  .profile-body, article > section, footer { padding-left: 0; padding-right: 0; }
  .entries > li, .skills > li { break-inside: avoid; }
}