/* /brand · NDS SOFT brand book. Loads after brand.css + company.css.
   Drawn like a sign-shop production drawing: sheets, title block, dimension lines, material chips. */
:root{--draw:#3b4fb8;--grid:rgba(23,19,26,.045)}
body{background:var(--bg)}
::selection{background:var(--pink-soft);color:var(--pink-strong)}
html{scrollbar-color:var(--line-strong) var(--bg)}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.9em;font-variant-numeric:tabular-nums}
.bb-nav{scrollbar-width:none}
.bb-nav::-webkit-scrollbar{display:none}

/* Sheet: white drawing paper with a hairline frame */
.sheet{position:relative;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);box-shadow:0 1px 2px rgba(23,19,26,.04),0 8px 24px -12px rgba(23,19,26,.10)}

/* Cover */
.bb-cover{padding:56px 0 24px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
.sheet-cover{display:grid;grid-template-columns:1.5fr 1fr;overflow:hidden}
.cover-copy{padding:48px 48px 44px}
.cover-copy h1{font-size:clamp(40px,6.4vw,76px);line-height:1.1;text-wrap:balance}
.cover-copy .lead{max-width:34em}
.tblock{display:grid;margin:0;border-left:1px solid var(--line-strong)}
.tblock div{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.tblock div:last-child{border-bottom:0}
.tblock dt{color:var(--ink-3);font-size:13px;font-weight:600}
.tblock dd{margin:0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.bb-oneline{max-width:46em;margin:28px 0 0;color:var(--ink-2);font-size:clamp(17px,1.8vw,19px);line-height:1.7}
.bb-oneline b{color:var(--ink)}

/* Section = one drawing sheet */
.bb-sec{padding:72px 0 8px}
.sec-head{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1.5px dashed var(--line-strong)}
.sec-head h2{font-size:clamp(28px,3.6vw,40px)}
.sheet-no{margin-left:auto;padding:3px 10px;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--ink-3);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sec-lead{max-width:44em;margin:20px 0 28px;color:var(--ink-2);font-size:17px;line-height:1.75}
.note-line{max-width:52em;margin-top:20px;color:var(--ink-3);font-size:15px;line-height:1.7}
.note-line code{color:var(--ink-2)}
h3{font-size:18px}

/* Logo drawing */
.drw-wrap{margin:0;padding:28px 24px 0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:20px 20px;background-color:var(--surface)}
.drw{display:block;width:100%;height:auto;max-height:440px;font-family:var(--font)}
.drw .halo{fill:var(--pink-soft)}
.drw .dot,.drw .pk{fill:var(--pink)}
.drw .ink{fill:var(--ink)}
.drw .clear{fill:none;stroke:var(--pink);stroke-width:1.5;stroke-dasharray:8 6}
.drw .cl{fill:none;stroke:var(--draw);stroke-width:1;stroke-dasharray:24 6 4 6;opacity:.45}
.drw .dl,.drw .tick{fill:none;stroke:var(--draw);stroke-width:1.6}
.drw text{fill:var(--draw);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.drw .note{fill:var(--pink-strong);font-size:18px}
.drw-wrap figcaption{display:grid;grid-template-columns:repeat(4,1fr);margin:24px -24px 0;border-top:1px solid var(--line)}
.drw-wrap figcaption span{padding:14px 18px;border-left:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1.5}
.drw-wrap figcaption span:first-child{border-left:0}
.drw-wrap figcaption b{display:block;color:var(--draw);font-size:17px;font-variant-numeric:tabular-nums}
/* dimension lines draw in once when the sheet reaches view */
.js .drw .dim path{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 900ms cubic-bezier(.16,1,.3,1)}
.js .drw .dim text{opacity:0;transition:opacity 300ms ease 500ms}
.js .drw .dim:nth-of-type(2) path{transition-delay:120ms}
.js .drw .dim:nth-of-type(3) path{transition-delay:240ms}
.js .drw .dim:nth-of-type(4) path{transition-delay:360ms}
.js .drw.on .dim path{stroke-dashoffset:0}
.js .drw.on .dim text{opacity:1}

.spec-row{display:grid;grid-template-columns:1fr 1.6fr;gap:24px;margin-top:24px}
.spec{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.spec h3{margin-bottom:16px}
.spec>p{margin-top:16px;color:var(--ink-3);font-size:15px}
.min-demo{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line-strong)}
.min-demo span{color:var(--ink-2);font-size:15px;font-variant-numeric:tabular-nums}
.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.variants li{display:grid;gap:12px}
.variants img{width:100%;height:auto;padding:28px 18px;border-radius:var(--r);border:1px solid var(--line)}
.v-light img{background:var(--bg)}
.v-dark img{background:var(--ink);border-color:var(--ink)}
.v-ink img{background:var(--surface)}
.variants span{color:var(--ink-2);font-size:14px;line-height:1.5}

/* Colour: ratio bar + material chips */
.ratio{display:grid;grid-template-columns:70fr 20fr 10fr;height:56px;margin-bottom:20px;border:1px solid var(--line-strong);border-radius:var(--r);overflow:hidden;font-size:14px;font-weight:600}
.ratio span{display:flex;align-items:center;padding:0 14px;white-space:nowrap}
.r-bg{background:linear-gradient(90deg,var(--bg) 50%,var(--surface) 50%);color:var(--ink-2)}
.r-ink{background:var(--ink);color:var(--surface)}
.r-pink{background:var(--pink);color:var(--surface);justify-content:center;padding:0 4px!important}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.chip{position:relative;display:grid;grid-template-rows:auto auto auto 1fr;width:100%;height:100%;padding:0 0 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.chip:hover{border-color:var(--pink-line);box-shadow:0 12px 32px rgba(163,52,106,.12);transform:translateY(-2px)}
.chip .sw{display:block;height:104px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.chip b,.chip code,.chip small{padding:0 16px}
.chip b{font-size:17px}
.chip code{margin-top:2px;color:var(--ink-2);font-size:14.5px;letter-spacing:.02em}
.chip small{margin-top:8px;color:var(--ink-3);font-size:14px;line-height:1.5}
.chip .cp{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font-size:13px;font-style:normal;font-weight:600;opacity:0;transform:translateY(-4px);transition:opacity var(--t),transform var(--t)}
.chip .cp .ico{width:16px;height:16px}
.chip:hover .cp,.chip:focus-visible .cp{opacity:1;transform:none}
.chip.done .cp{opacity:1;transform:none;background:var(--ok);color:#fff}
.c-pink .sw{background:var(--pink)}
.c-pink-strong .sw{background:var(--pink-strong)}
.c-pink-soft .sw{background:var(--pink-soft)}
.c-ink .sw{background:var(--ink)}
.c-ink-2 .sw{background:var(--ink-2)}
.c-ink-3 .sw{background:var(--ink-3)}
.c-bg .sw{background:var(--bg)}
.c-line .sw{background:var(--line)}

/* Type */
.specimen{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:24px;padding:32px 36px}
.glyphs{font-size:clamp(72px,11vw,148px);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.glyphs span{color:var(--pink)}
.weights{display:grid;gap:0;margin:0}
.weights div{display:grid;grid-template-columns:56px 1fr;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line-strong)}
.weights div:last-child{border-bottom:0}
.weights dt{color:var(--draw);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.weights dd{margin:0;font-size:22px}
.w7{font-weight:700}.w6{font-weight:600}.w5{font-weight:500}.w4{font-weight:400}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.scale,.family{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;border-style:hidden;box-shadow:0 0 0 1px var(--line)}
th,td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
thead th{background:var(--bg);color:var(--ink-3);font-size:13px;font-weight:600}
tbody tr:last-child>*{border-bottom:0}
tbody th{font-weight:600;white-space:nowrap}
.scale td:nth-child(2),.scale td:nth-child(3){color:var(--ink-2);white-space:nowrap}
.ex{font-size:16px}
.ex-d{font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.02em}
.ex-h{font-size:clamp(22px,2.6vw,30px);font-weight:700;line-height:1.25}
.ex-t{font-size:22px;font-weight:700}
.ex-l{font-size:19px;color:var(--ink-2)}
.ex-s{font-size:14px;font-weight:600}
.ex-s::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--ok)}

/* Voice */
.voice{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vc{padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.vc h3{margin-bottom:14px}
.say{display:flex;gap:10px;align-items:flex-start;padding:10px 0;font-size:16px;line-height:1.6}
.say .ico{margin-top:3px}
.say.yes .ico{color:var(--ok)}
.say.no{border-top:1px dashed var(--line-strong);color:var(--ink-3)}
.say.no span{text-decoration:line-through;text-decoration-color:rgba(180,35,67,.55);text-decoration-thickness:1.5px}
.say.no .ico{color:var(--bad)}
.rules{display:grid;gap:10px;max-width:52em;margin-top:24px}
.rules li{position:relative;padding-left:22px;color:var(--ink-2);line-height:1.7}
.rules li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--pink)}

/* Family */
.family td:nth-child(2){color:var(--ink-3);text-decoration:line-through;text-decoration-color:rgba(180,35,67,.5)}
.family td:nth-child(3){color:var(--ink-2)}
.family tbody th{font-size:17px}
.family a{text-underline-offset:3px;white-space:nowrap}

/* Misuse */
.donts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.donts li{display:grid;gap:10px}
.dz{position:relative;display:grid;place-items:center;height:120px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.dz::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(180,35,67,.5) 50%,transparent calc(50% + 1px))}
.dz img{width:160px;height:auto}
.d-stretch{transform:scaleX(1.35) scaleY(.8)}
.d-rotate{transform:rotate(-12deg)}
.d-hue{filter:hue-rotate(150deg) saturate(1.4)}
.d-shadow{filter:drop-shadow(0 0 6px rgba(194,69,125,.9)) drop-shadow(3px 3px 0 #17131a)}
.dz-busy{background:repeating-linear-gradient(45deg,#c2457d 0 10px,#fbe9f1 10px 20px,#4a4049 20px 26px)}
.d-type{font-family:Georgia,"Times New Roman",serif;font-size:30px;font-style:italic;color:var(--ink)}
.donts p{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.donts p .ico{width:18px;height:18px;color:var(--bad)}

/* Files */
.files{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.file{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:12px;height:100%;padding:0 18px 16px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden}
.file:hover{border-color:var(--pink-line);box-shadow:0 12px 32px rgba(163,52,106,.12);transform:translateY(-2px)}
.fz{grid-column:1/-1;display:grid;place-items:center;height:120px;margin:0 -18px 14px;border-bottom:1px solid var(--line)}
.fz img{width:150px;height:auto}
.fz-light{background:var(--bg)}
.fz-dark{background:var(--ink)}
.file b{font-size:17px}
.file small{grid-column:1;color:var(--ink-3);font-size:14px}
.file .ico{grid-column:2;grid-row:2/4;align-self:center;color:var(--pink)}
.contact{margin:28px 0 72px;padding:20px 24px;border:1.5px dashed var(--pink-line);border-radius:var(--r-lg);background:var(--surface)}
.contact p{color:var(--ink-2);line-height:1.8}

/* Footer (shared look, page-local copy) */
.site-footer{padding:40px 0;background:var(--surface);border-top:1px solid var(--line)}
.footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px}
.footer-brand p{color:var(--ink-3);font-size:14px}
.footer-nav{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.footer-nav a,.footer-top{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--ink-2);text-decoration:none}
.footer-nav a:hover,.footer-top:hover{background:var(--pink-soft);color:var(--pink-strong)}

.toast{position:fixed;left:50%;bottom:24px;z-index:60;margin:0;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:opacity var(--t),transform 380ms cubic-bezier(.16,1,.3,1)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:1023px){
 .sheet-cover{grid-template-columns:1fr}
 .tblock{grid-template-columns:repeat(2,1fr);border-left:0;border-top:1px solid var(--line-strong)}
 .tblock div{border-right:1px solid var(--line)}
 .tblock div:last-child{grid-column:1/-1;border-top:1px solid var(--line)}
 .spec-row{grid-template-columns:1fr}
 .chips{grid-template-columns:repeat(2,1fr)}
 .drw-wrap figcaption{grid-template-columns:repeat(2,1fr)}
 .drw-wrap figcaption span:nth-child(3){border-left:0}
 .drw-wrap figcaption span:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:767px){
 .header-row{flex-wrap:wrap;gap:0 16px}
 .site-header .bb-nav{order:3;width:100%;margin:0 0 6px;overflow-x:auto}
 .bb-cover{padding:24px 0 8px}
 .cover-copy{padding:28px 22px}
 .tblock{grid-template-columns:1fr}
 .tblock div{grid-template-columns:88px 1fr;padding:12px 22px;border-right:0}
 .bb-sec{padding:56px 0 4px}
 .sec-lead{font-size:16px}
 .drw-wrap{padding:16px 8px 0}
 .drw-wrap figcaption{margin:16px -8px 0}
 .variants,.voice,.files{grid-template-columns:1fr}
 .variants li{grid-template-columns:150px 1fr;align-items:center}
 .variants img{padding:18px 12px}
 .specimen{grid-template-columns:1fr;padding:24px 22px}
 .donts{grid-template-columns:repeat(2,1fr)}
 .dz{height:96px}
 .dz img{width:124px}
 .scale thead{display:none}
 .scale tr{display:grid;grid-template-columns:1fr auto auto;gap:2px 14px;padding:14px 16px;border-bottom:1px solid var(--line)}
 .scale tbody tr:last-child{border-bottom:0}
 .scale th,.scale td{padding:0;border:0}
 .scale td.ex{grid-column:1/-1;margin-top:4px}
 .family thead{display:none}
 .family tr{display:grid;gap:4px;padding:14px 16px;border-bottom:1px solid var(--line)}
 .family tbody tr:last-child{border-bottom:0}
 .family th,.family td{padding:0;border:0}
 .family td:nth-child(2)::before{content:"ไม่เขียน: ";text-decoration:none;display:inline-block}
 .footer-nav{margin-left:0}
}
@media (max-width:419px){
 .chips{grid-template-columns:1fr 1fr;gap:10px}
 .chip .sw{height:72px}
 .chip b,.chip code,.chip small{padding:0 12px}
 .ratio{font-size:13px}
 .r-ink,.r-bg{padding:0 10px!important}
 .variants li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .js .drw .dim path{stroke-dashoffset:0}
 .js .drw .dim text{opacity:1}
 .chip:hover,.file:hover{transform:none}
}
@media (max-width:767px){
 .drw text{font-size:40px}
 .drw .note{display:none}
 .glyphs{font-size:clamp(44px,13vw,72px)}
 .variants img{max-width:260px}
 .family td:nth-child(2)::before{margin-right:.35em}
}
.footer-nav a[aria-current="page"]{color:var(--pink-strong);font-weight:600}