/* GALOK Visual Notes · section sheet on the unified foundation.
   Signature: a contact sheet. Frames carry printed numbers; a frame that already leads somewhere is circled in grease pencil. */
.vn-hero{padding-top:clamp(48px,9vw,128px);padding-bottom:clamp(28px,4vw,48px)}
.vn-hero .g-eyebrow{margin-bottom:22px}
.vn-hero__title{margin:0;max-width:11em;font:560 clamp(2.6rem,6.8vw,5.8rem)/.98 var(--g-sans);letter-spacing:-.055em;text-wrap:balance}
.vn-hero__title em{font:italic 400 1.04em/1 var(--g-serif);letter-spacing:-.02em}
.vn-hero__dek{max-width:34em;margin:26px 0 0;color:var(--g-ink-2);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55}

.vn-method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px clamp(24px,5vw,72px);padding-top:clamp(36px,6vw,80px)}
.vn-method .g-eyebrow{grid-column:1/-1}
.vn-method__lede{margin:0;max-width:34em;color:var(--g-ink-2);line-height:1.6}
.vn-steps{display:grid;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--g-ink)}
.vn-steps li{display:grid;grid-template-columns:3rem 6.5rem minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--g-rule)}
.vn-steps__n{font:500 12px/1 var(--g-mono);color:var(--g-muted)}
.vn-steps b{font:560 1.15rem/1.2 var(--g-sans);letter-spacing:-.02em}
.vn-steps span:last-child{color:var(--g-ink-2);line-height:1.5}

.vn-sheet{padding-top:clamp(56px,8vw,112px)}
.vn-sheet__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--g-ink)}
.vn-sheet__head h2{margin:0;font:560 clamp(1.6rem,3vw,2.4rem)/1.05 var(--g-sans);letter-spacing:-.045em}
.vn-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,32px);margin:0;padding:0;list-style:none}
.vn-frame > a{display:block;color:inherit;text-decoration:none}
.vn-frame__pic{position:relative;display:block;aspect-ratio:3/2;overflow:visible;background:var(--g-surface);border-radius:3px}
.vn-frame__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:3px}
/* the grease-pencil circle: an imperfect ring drawn round the chosen frame */
.vn-frame.is-circled .vn-frame__pic::after{content:"";position:absolute;inset:-10px -12px -12px -9px;border:3px solid var(--g-signal);border-radius:46% 54% 48% 52% / 55% 45% 55% 45%;transform:rotate(-2deg);pointer-events:none;transition:transform .5s var(--g-spring)}
.vn-frame.is-circled a:hover .vn-frame__pic::after,.vn-frame.is-circled a:focus-visible .vn-frame__pic::after{transform:rotate(1deg) scale(1.02)}
.vn-frame__edge{display:block;margin:12px 0 0;font:500 11px/1.3 var(--g-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-muted)}
.vn-frame__cap{display:grid;gap:6px;margin-top:8px}
.vn-frame__cap b{font:560 1.3rem/1.1 var(--g-sans);letter-spacing:-.03em}
.vn-frame__cap small{color:var(--g-ink-2);font-size:15px;line-height:1.5}
.vn-frame__cap em{font-style:normal;font-weight:560;text-decoration:underline;text-decoration-color:var(--g-signal);text-decoration-thickness:2px;text-underline-offset:.25em}
@media (max-width:860px){.vn-method{grid-template-columns:1fr}.vn-frames{grid-template-columns:1fr}.vn-steps li{grid-template-columns:2.5rem 5.5rem minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.vn-frame.is-circled .vn-frame__pic::after{transition:none}}