.np { background: #fffdf6 repeating-linear-gradient(transparent 0 31px, #cfe0f0 31px 32px); padding-block: 10px 50px; position: relative; }
.np::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: max(16px, calc(50% - 640px)); border-inline-start: 2px solid #f3a3a1; }
.np-head { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: center; padding-block: 24px 10px; }
.np-head .hand { font-size: 32px; color: var(--coral-ink); }
.np-head h1 { font-family: var(--f-hand); font-size: clamp(54px, 7vw, 86px); font-weight: 700; line-height: .95; color: var(--ink); }
.np-head p { font-size: 18px; max-inline-size: 520px; margin-block-start: 10px; }
.np-env { position: relative; aspect-ratio: 3 / 2; background: #fff; border: 2px solid var(--ink); border-radius: 8px; box-shadow: 8px 8px 0 var(--coral); display: grid; place-items: center; overflow: hidden; }
.np-env::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 60%; background: linear-gradient(to bottom right, transparent 49.5%, var(--ink) 49.5% 50.5%, transparent 50.5%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.5%, var(--ink) 49.5% 50.5%, transparent 50.5%) right / 50% 100% no-repeat; }
.np-env img { inline-size: 84px; position: relative; z-index: 1; margin-block-start: 40px; }
.np-env a { position: absolute; inset-block-end: 14px; font-family: var(--f-head); font-weight: 600; font-size: 17px; }
.np-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; margin-block-start: 40px; }
.np-note { background: #fff; padding: 28px 26px 22px; position: relative; box-shadow: 0 10px 24px rgb(46 42 43 / .1); }
.np-note:first-child { transform: rotate(-1.2deg); background: #fff7c7; }
.np-note:last-child { transform: rotate(1deg); }
.np-note::before { content: ""; position: absolute; inset-block-start: -12px; inset-inline-start: 50%; translate: -50% 0; inline-size: 110px; block-size: 26px; background: rgb(235 97 94 / .45); rotate: -3deg; }
.np-note h2 { font-family: var(--f-hand); font-size: 34px; margin-block-end: 8px; }
.np-note ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.np-note li { padding-inline-start: 24px; position: relative; }
.np-note li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--coral-ink); font-weight: 700; }
.np-note:last-child li::before { content: "\2192"; color: var(--sky); }
.np-sample { margin-block-start: 44px; max-inline-size: 760px; }
.np-sample h2 { font-size: 22px; margin-block-end: 10px; }
.np-sample blockquote { font-family: var(--f-hand); font-size: 30px; line-height: 32px; color: #2b4f86; padding-inline-start: 18px; }
.np-sample p { margin-block-start: 12px; color: var(--ink-soft); }
@media (max-width: 860px) { .np-head, .np-notes { grid-template-columns: 1fr; } .np-env { max-inline-size: 340px; } .np::before { display: none; } }