.header { height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: baseline; font-size: 27px; line-height: 1; font-weight: 750; letter-spacing: -1.4px; white-space: nowrap; }
.wordmark-dot { color: var(--clay); }
.wordmark-dev { font-weight: 400; color: var(--muted); }
.header-note { font: 9px var(--mono); letter-spacing: 1.6px; color: var(--muted); }
.nav { display: flex; align-items: center; gap: 32px; font-size: 12px; white-space: nowrap; }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; height: 1px; left: 0; right: 0; bottom: -5px; background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link sup { font: 8px var(--mono); margin-left: 3px; color: var(--muted); }
.nav-hello { padding: 10px 20px; background: var(--clay); color: #fff6e9; border: 1px solid var(--clay); border-radius: 30px; transition: background .25s, transform .25s; }
.nav-hello span { margin-left: 10px; }
.nav-hello:hover { background: var(--clay-dark); transform: translateY(-2px); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 16px; }
.section-heading h2 { font-size: clamp(44px, 4.6vw, 66px); letter-spacing: -2.8px; margin-top: 14px; }
.section-note { margin-bottom: 9px; transform: rotate(-4deg); }
.footer { display: flex; align-items: center; gap: 30px; min-height: 110px; }
.footer-signature { font: italic 38px var(--serif); letter-spacing: -3px; }
.signature-dot { color: var(--clay); }
.footer-copy { display: flex; flex-direction: column; font-size: 10px; line-height: 1.8; color: var(--muted); }
.footer-right { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 10px; color: var(--muted); }
.torch-toggle { background: none; border: 0; padding: 8px 0; font-size: 10px; color: var(--muted); }
.torch-toggle::before { content: ''; width: 5px; height: 5px; background: var(--clay); display: inline-block; border-radius: 50%; margin-right: 7px; }
.torch-toggle[aria-pressed='false']::before { background: #9e978a; }
.back-top span { margin-left: 10px; color: var(--clay); font-size: 17px; }
.torch-cursor { position: fixed; top: 0; left: 0; width: 28px; height: 42px; z-index: 9999; pointer-events: none; will-change: transform; }
.torch-flame { transform-origin: 13px 21px; animation: flame-flicker .65s ease-in-out infinite alternate; }
.torch-glow { animation: flame-glow 1.4s ease-in-out infinite alternate; }
.ember { opacity: 0; animation: ember-rise 1.6s ease-out infinite; }
.ember-two { animation-delay: .8s; }
.torch-cursor.is-hovering .torch-glow { rx: 14px; opacity: .2; }
.torch-cursor.is-hovering .torch-flame { animation-duration: .35s; }
@media (hover: hover) and (pointer: fine) {
  html[data-torch='on'], html[data-torch='on'] * { cursor: none !important; }
}
@keyframes flame-flicker { 0% { transform: scale(.92, 1.04) rotate(-4deg); } 50% { transform: scale(1.04, .95) rotate(3deg); } 100% { transform: scale(.96, 1.08) rotate(-2deg); } }
@keyframes flame-glow { to { opacity: .05; transform: scale(.95); } }
@keyframes ember-rise { 15% { opacity: .8; } 85%, 100% { transform: translate(2px, -9px); opacity: 0; } }
@media (max-width: 1000px) { .header-note { display: none; } }
@media (max-width: 760px) {
  .header { height: 82px; gap: 18px; }
  .wordmark { font-size: 23px; }
  .nav { gap: 19px; font-size: 11px; }
  .nav-about { display: none; }
  .nav-hello { padding: 8px 14px; }
  .nav-hello span { margin-left: 5px; }
  .section-heading h2 { font-size: 44px; letter-spacing: -2px; }
  .section-note { display: none; }
  .footer { min-height: 110px; gap: 18px; flex-wrap: wrap; padding-block: 24px; }
  .footer-right { gap: 18px; }
  .footer-copy { font-size: 9px; }
}
@media (max-width: 360px) {
  .wordmark { font-size: 21px; }
  .nav { gap: 12px; font-size: 10px; }
  .nav-hello { padding: 7px 11px; }
  .footer-right { width: 100%; margin-left: 0; justify-content: space-between; }
}
