/* Notes: link-out cards for reels, LinkedIn posts, essays and blog posts (cms:notes). Shared by /notes and the home "From our notes" block. */
.nt-hero{padding-top:112px}
.nt-hero h1{font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0 0 22px}
.nt-hero .lede{max-width:56ch;margin-bottom:40px}
.nt-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.nt-filter button{font:500 14px/1 var(--f-body,inherit);color:var(--ink-2);background:transparent;border:1px solid var(--rule-soft);border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.nt-filter button:hover{border-color:var(--ink)}
.nt-filter button[aria-pressed="true"]{background:var(--ink);color:var(--paper,#F6F4F0);border-color:var(--ink)}
.nt-list{padding-top:48px}
.nt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 28px}
.nt-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none}
.nt-card[hidden]{display:none}
.nt-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#e9e6df;margin-bottom:6px}
.nt-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nt-card:hover .nt-media img{transform:scale(1.03)}
.nt-text{display:flex;align-items:flex-end;padding:22px;background:transparent;border:1px solid var(--rule-soft);box-sizing:border-box}
.nt-text q{quotes:none;font:600 clamp(19px,1.6vw,23px)/1.32 var(--f-head);letter-spacing:-.01em;color:var(--ink);word-break:keep-all}
.nt-text::before{content:"";position:absolute;left:22px;top:22px;width:28px;height:3px;background:var(--orange,#FF5A1F)}
.nt-play{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nt-play::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink,#191918)}
.nt-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--mute)}
.nt-meta b{font-weight:500;color:var(--ink-2)}
.nt-card h3{font:600 18px/1.35 var(--f-head);letter-spacing:-.005em;margin:0;word-break:keep-all}
.nt-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:5px;font-size:13.5px;color:var(--mute);transition:gap .25s,color .25s}
.nt-card:hover .nt-go{gap:9px;color:var(--ink)}
.nt-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.nt-follow{margin:72px 0 0;color:var(--mute);font-size:15px}
.nt-follow a{color:var(--ink);border-bottom:1px solid var(--rule-soft)}
.nt-home .nt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.nt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.nt-grid,.nt-home .nt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}.nt-card h3{font-size:16px}.nt-text{padding:16px}.nt-text::before{left:16px;top:16px}.nt-text q{font-size:17px}}

/* ---------- channel bands on /notes (2026-10-12): one band per channel, each laid out for its format ---------- */
.nt-jump{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--sp-head)}
.nt-jump a{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-2);border:1px solid var(--rule-soft);border-radius:999px;padding:8px 14px 8px 12px;transition:border-color .2s,color .2s,background .2s}
.nt-jump a:hover{border-color:var(--ink);color:var(--ink);background:rgba(255,255,255,.5)}
.nt-chs{padding-bottom:var(--sp-sec)}
.nt-ch+.nt-ch{margin-top:var(--sp-group)}
.nt-ch{scroll-margin-top:110px}
.nt-ch-h{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:28px;border-bottom:3px double var(--rule)}
.nt-ch-h h2{font:600 30px/1 var(--f-head);letter-spacing:-.015em;margin:0}
.nt-ch-sub{color:var(--mute);font-size:14px;margin-left:4px}
.nt-ch-n{font-size:12px;color:var(--mute);border:1px solid var(--rule-soft);border-radius:999px;padding:2px 8px;line-height:1.4}
.nt-ch-follow{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--rule-soft);padding-bottom:2px;transition:color .2s,border-color .2s}
.nt-ch-follow:hover{color:var(--ink);border-color:var(--ink)}
/* LinkedIn: the words are the picture */
.nt-li{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nt-li-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:250px;padding:26px 24px 22px;border:1px solid var(--rule-soft);border-radius:6px;background:rgba(255,255,255,.42);color:inherit;transition:border-color .25s,background .25s,transform .35s cubic-bezier(.16,1,.3,1)}
.nt-li-card::before{content:"";position:absolute;left:24px;top:0;width:28px;height:3px;background:var(--orange,#F56A1D)}
.nt-li-card:hover{border-color:var(--ink);background:rgba(255,255,255,.7);transform:translateY(-2px)}
.nt-li-top{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute)}
.nt-li-top b{font-weight:500;color:var(--ink-2)}.nt-li-top time{margin-left:auto}
.nt-li-card q{quotes:none;font:600 21px/1.36 var(--f-head);letter-spacing:-.01em;color:var(--ink);word-break:keep-all}
.nt-li-title{color:var(--ink-2);font-size:14px;line-height:1.5;word-break:keep-all}
.nt-li-card .nt-go{margin-top:auto}
.nt-li-card:hover .nt-go{gap:9px;color:var(--ink)}
/* Instagram: the existing 4:5 reel cards */
.nt-ig{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Brunch: editorial pairs */
.nt-br{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
.nt-br-card{display:grid;grid-template-columns:42% 1fr;gap:22px;align-items:start;color:inherit}
.nt-br-media{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#e9e6df}
.nt-br-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nt-br-card:hover .nt-br-media img{transform:scale(1.03)}
.nt-br-text{display:flex;align-items:flex-end;padding:18px;border:1px solid var(--rule-soft);background:transparent;box-sizing:border-box}
.nt-br-text q{quotes:none;font:600 17px/1.35 var(--f-head);word-break:keep-all}
.nt-br-body{display:flex;flex-direction:column;gap:10px;min-height:100%}
.nt-br-card h3{font:600 23px/1.3 var(--f-head);letter-spacing:-.01em;margin:0;word-break:keep-all}
.nt-br-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nt-br-card .nt-go{margin-top:auto}
.nt-br-card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.nt-br-card:hover .nt-go{gap:9px;color:var(--ink)}
/* Blog: a ledger */
.nt-bl{border-top:1px solid var(--rule-soft)}
.nt-bl-row{display:grid;grid-template-columns:140px 1fr 24px;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule-soft);color:inherit;transition:background .2s,padding .3s cubic-bezier(.16,1,.3,1)}
.nt-bl-row time{font-size:13px;color:var(--mute)}
.nt-bl-main{display:flex;flex-direction:column;gap:4px}
.nt-bl-title{font:600 19px/1.35 var(--f-head);word-break:keep-all}
.nt-bl-line{font-size:14px;color:var(--ink-2);word-break:keep-all}
.nt-bl-row i{color:var(--mute);justify-self:end;transition:color .2s,transform .2s}
.nt-bl-row:hover{background:rgba(255,255,255,.45);padding-left:12px;padding-right:12px}
.nt-bl-row:hover i{color:var(--ink);transform:translate(2px,-2px)}
@media (max-width:1000px){.nt-li{grid-template-columns:repeat(2,minmax(0,1fr))}.nt-ig{grid-template-columns:repeat(3,minmax(0,1fr))}.nt-br{grid-template-columns:1fr}}
@media (max-width:760px){.nt-li{grid-template-columns:1fr}.nt-ig{grid-template-columns:repeat(2,minmax(0,1fr))}.nt-br-card{grid-template-columns:1fr}.nt-ch-sub{display:none}.nt-bl-row{grid-template-columns:1fr 20px}.nt-bl-row time{grid-column:1/-1}}

/* LinkedIn cards with the post's own photo (썸네일 filled by scripts/cms/notes_thumbs.py) */
.nt-li-card.has-media{padding-top:0;overflow:hidden}
.nt-li-media{display:block;aspect-ratio:16/10;margin:0 -24px 4px;overflow:hidden;background:#e9e6df}
.nt-li-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nt-li-card:hover .nt-li-media img{transform:scale(1.03)}
.nt-li-card.has-media::before{z-index:1}
.nt-li-card.has-media q{font-size:19px}

/* photo cards: the orange tick belongs to text cards only, it should not sit on the photo (2026-10-12) */
.nt-li-card.has-media::before{display:none}