.design-notes{position:relative;padding:48px 0 100px;scroll-margin-top:12px}
.design-notes .section-intro{max-width:760px;margin:0 auto}
.design-notes .section-intro p{max-width:530px;margin-inline:auto}
.notes-legacy-anchor{position:absolute;top:0;left:0;scroll-margin-top:12px;pointer-events:none}
.notes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1160px;margin:36px auto 0;align-items:stretch}
.note-card{padding:0;background:transparent;clip-path:polygon(12px 0,calc(100% - 12px) 0,calc(100% - 12px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 12px) calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 12px),0 calc(100% - 12px),0 12px,12px 12px)}
.note-card-inner{height:100%;min-height:354px;display:flex;flex-direction:column;padding:28px;background:var(--white);clip-path:inherit}
.note-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;color:var(--soft);font:10px/1.5 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.note-index{font-size:12px;color:var(--ink)}
.note-card :is(h2,h3){margin:34px 0 18px;font:650 clamp(24px,2.2vw,30px)/1.16 var(--display);letter-spacing:-.035em;max-width:16ch;text-wrap:pretty}
.note-card p{margin:0;color:var(--soft);font:400 14px/1.65 var(--body);max-width:34ch;text-wrap:pretty}
.note-card-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:auto;padding-top:32px}
.note-status{display:inline-block;padding:6px 9px;border:1px solid var(--line);color:var(--soft);font:10px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;background:var(--paper)}
.notes-explore{display:flex;justify-content:center;margin-top:38px}
.notes-explore .button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}

.notes-index{width:calc(100% - var(--gutter)*2);max-width:1160px;margin-inline:auto;padding:126px 0 90px;min-height:68vh}
.notes-back{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--control-border);border-radius:25px;padding:11px 15px;color:var(--ink);font:11px/1.3 var(--mono);white-space:nowrap}
.notes-back svg{width:18px;height:18px;rotate:180deg;stroke:currentColor;fill:none;stroke-width:2}
.notes-back:hover{background:var(--white)}
.notes-index-intro{margin-top:48px;max-width:760px}
.notes-eyebrow{font:10px/1.5 var(--mono);letter-spacing:.1em;color:var(--soft)}
.notes-index h1{font:700 clamp(50px,6.8vw,88px)/1.05 var(--display);letter-spacing:-.05em;margin:20px 0 23px}
.notes-index-intro>p{font:400 17px/1.65 var(--body);max-width:510px;color:var(--soft);margin:0}
.notes-toolbar{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.notes-filters{display:flex;flex-wrap:wrap;gap:8px}
.notes-filter{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--soft);font:500 12px/1.3 var(--body);transition:background .2s,color .2s,border-color .2s;touch-action:manipulation}
.notes-filter>span{font:10px/1.3 var(--mono);opacity:.7}
.notes-filter[aria-pressed="true"]{background:var(--primary);border-color:#526421;color:#141210}
.notes-filter:hover:not([aria-pressed="true"]){background:var(--white);color:var(--ink)}

.notes-index .notes-grid{margin-top:25px;max-width:none}
.notes-index .note-card[hidden]{display:none}
.notes-empty{margin:36px 0 0;color:var(--soft);font:15px/1.6 var(--body)}
.notes-page .header nav a[aria-current="page"]{background:var(--primary);color:#141210}
@media(max-width:1000px){.notes-index .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.notes-toolbar{align-items:flex-start}.notes-index .note-card :is(h2,h3){font-size:27px}}
@media(max-width:700px){.notes-index{padding:102px 0 68px}.notes-index-intro{margin-top:34px}.notes-index h1{font-size:clamp(42px,10vw,60px);margin-top:16px}.notes-index-intro>p{font-size:15px;max-width:34ch}.notes-toolbar{margin-top:32px;display:block}.notes-filter{min-height:44px;font-size:11px;padding:10px 12px;gap:7px}.notes-filters{gap:7px}.notes-index .notes-grid{grid-template-columns:1fr;margin-top:19px;max-width:none}.notes-index .note-card :is(h2,h3){font-size:25px}.notes-explore{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.notes-filter{transition:none}}
@media(max-width:900px){.notes-index{max-width:620px}.notes-grid{grid-template-columns:1fr;max-width:620px;gap:18px;margin-top:34px}.note-card-inner{min-height:0;padding:27px 28px}.note-card :is(h2,h3){max-width:25ch;margin-top:25px;font-size:28px}.note-card p{max-width:52ch;font-size:15px}.note-card-footer{padding-top:26px}}
@media(max-width:600px){.design-notes{padding:36px 0 76px;scroll-margin-top:8px}.notes-legacy-anchor{scroll-margin-top:8px}.notes-grid{margin-top:30px;gap:17px}.note-card-inner{padding:23px}.note-card :is(h2,h3){font-size:25px;line-height:1.18;margin:24px 0 15px}.note-card p{font-size:14px;line-height:1.65}.note-meta{font-size:9px;letter-spacing:.05em}.note-card-footer{padding-top:25px}.note-status{font-size:9px}}

.note-card-link{transition:background .2s}
.note-card-link:hover{background:color-mix(in srgb,var(--white) 96%,var(--ink))}
.note-card-link:focus-visible{outline:0;box-shadow:inset 0 0 0 3px #729619}
@media(prefers-reduced-motion:reduce){.note-card-link{transition:none}}