
:root{--tgtc-ui:'Be Vietnam Pro',Arial,sans-serif;--tgtc-reading:'Noto Serif',Georgia,serif;--tgtc-ink:#3e3027;--tgtc-muted:#786a5f;--tgtc-rule:#e4d8c8}
.public-main{color:var(--tgtc-ink)}
.public-main :is(.works-page,.authors-page,.artists-page,.chords-archive,.stories-page,.cv-page,.ct-page,.vv-page,.vd-page,.em-page,.ed-page,.sd-page,.author-profile,.artist-profile,.work-dossier,.cd-page,.sp-page){font-family:var(--tgtc-ui);font-size:16px;line-height:1.65}
.public-main :where(h1,h2,h3){font-family:var(--tgtc-reading);font-weight:500;letter-spacing:-.015em;text-wrap:pretty}
.public-main :where(h1){font-size:clamp(30px,3.4vw,44px);line-height:1.2}
.public-main :where(h2){font-size:26px;line-height:1.35}
.public-main :where(h3){font-size:20px;line-height:1.4}
.public-main :is(button,input,select,textarea,label,.button){font-family:var(--tgtc-ui)}
.public-main :is(.crumb,.ap-crumb,.ip-crumb,.sd-crumb){font-family:var(--tgtc-ui);font-size:13px;line-height:1.6}
.public-main :is(.eyebrow,.ap-eyebrow,.sd-kicker){font-family:var(--tgtc-ui);font-size:12px;letter-spacing:.09em;line-height:1.5}
.ap-intro h1,.ip-intro h1,.wd-hero h1,.sd-heading h1{font-family:var(--tgtc-reading);font-size:clamp(30px,3.4vw,44px);line-height:1.18;font-weight:500;letter-spacing:-.02em;margin:8px 0 18px}
.ap-intro>p:not(.ap-byline),.ip-intro>p,.wd-lead,.sd-lead{font:400 18px/1.75 var(--tgtc-ui);color:#655448;max-width:68ch}
.ap-intro .ap-byline,.ip-intro>span,.wd-byline,.sd-meta-row{font:400 13px/1.65 var(--tgtc-ui)}
.ap-overview{display:flex;flex-direction:column;gap:0}
.ap-timeline,.ap-work-style{width:100%;min-width:0}
.ap-work-style{display:block}
.ap-section,.ip-section,.wd-section{padding-top:22px;padding-bottom:26px;margin-bottom:22px}
.ap-section h2,.ip-section h2,.wd-section h2,.sd-body h2,.legacy-rich h2{font:500 26px/1.4 var(--tgtc-reading);text-transform:none;letter-spacing:-.01em;margin:1.5em 0 .7em}
.ap-section h3,.ip-section h3,.wd-section h3,.sd-body h3,.legacy-rich h3{font:500 21px/1.45 var(--tgtc-reading);text-transform:none;letter-spacing:0}
.ap-biography,.ip-biography-text,.wd-story,.sd-body,.ed-body,.article-body,.legacy-rich{font:400 18px/1.9 var(--tgtc-reading);color:var(--tgtc-ink);overflow-wrap:anywhere;word-break:normal;text-align:left;max-width:72ch;white-space:normal}
.public-main :is(.ap-biography,.ip-biography-text,.wd-story,.sd-body,.ed-body,.article-body,.legacy-rich) :is(p,li,td,th,div,span){font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:normal}
.public-main :is(.ap-biography,.ip-biography-text,.wd-story,.sd-body,.ed-body,.article-body,.legacy-rich) p{margin:0 0 1.15em}
.legacy-rich{width:100%}
.legacy-rich>h2:first-child{margin-top:0}
.legacy-rich ul,.legacy-rich ol{padding-left:1.4em;margin:.7em 0 1.25em}
.legacy-rich li{margin-bottom:.55em}
.legacy-rich blockquote{font:italic 21px/1.8 var(--tgtc-reading);margin:1.6em 0;padding:4px 0 4px 22px;border-left:2px solid #af8250;color:#715139}
.legacy-rich img{max-height:620px;object-fit:contain;margin:1.7em auto;border-radius:6px}
.ap-biography,.ip-biography-text{white-space:normal}
.ip-bio{display:block}
.ip-bio-portrait{display:none!important}
.ip-bio>div{max-width:72ch}
.ip-bio>div>p{font:400 17px/1.8 var(--tgtc-ui)}
.public-main :is(.ap-section,.ip-section) details>summary{font:500 14px/1.7 var(--tgtc-ui);padding:10px 0;margin-bottom:14px;color:#825432}
.wd-top-grid>#context,.wd-top-grid>#story{grid-column:1/-1}
.wd-context{grid-template-columns:160px minmax(0,1fr)}
.wd-context p{font:400 17px/1.85 var(--tgtc-ui)}
.wd-lyrics .work-lyrics{font:400 18px/2 var(--tgtc-reading);white-space:pre-line}
.wd-lyrics blockquote{font:italic 21px/1.9 var(--tgtc-reading)}
.sd-story-content{display:block}
.sd-story-content .sd-body{width:100%;max-width:72ch}
.sd-heading .sd-lead{font-size:18px;line-height:1.8}
.sd-meta-row{margin-top:22px}
.ap-quick,.ip-facts,.wd-facts,.sd-panel{font-family:var(--tgtc-ui)}
.ap-quick :is(dt,dd),.ip-facts :is(dt,dd),.wd-facts :is(dt,dd){font-size:14px;line-height:1.7}
.public-main :is(.aa-intro,.ar-intro,.works-intro,.stories-lead){font-size:17px;line-height:1.8}


@media(min-width:1000px){.ap-layout,.ip-layout{grid-template-columns:minmax(0,1fr) 260px;gap:32px}.ap-main,.ip-main{min-width:0}.ap-hero{grid-template-columns:34% minmax(0,1fr)}}
@media(max-width:760px){
 .public-main :is(.works-page,.authors-page,.artists-page,.chords-archive,.stories-page,.cv-page,.ct-page,.vv-page,.vd-page,.em-page,.ed-page,.sd-page,.author-profile,.artist-profile,.work-dossier){font-size:15px}
 .public-main :where(h1),.ap-intro h1,.ip-intro h1,.wd-hero h1,.sd-heading h1{font-size:32px;line-height:1.25}
 .public-main :where(h2),.ap-section h2,.ip-section h2,.wd-section h2,.sd-body h2,.legacy-rich h2{font-size:23px;line-height:1.4}
 .public-main :where(h3),.legacy-rich h3{font-size:19px;line-height:1.45}
 .ap-intro>p:not(.ap-byline),.ip-intro>p,.wd-lead,.sd-lead,.sd-heading .sd-lead{font-size:17px;line-height:1.75}
 .ap-biography,.ip-biography-text,.wd-story,.sd-body,.ed-body,.article-body,.legacy-rich{font-size:17px;line-height:1.9;max-width:100%}
 .ap-section,.ip-section,.wd-section{padding-top:18px;padding-bottom:20px;margin-bottom:18px}
 .legacy-rich blockquote,.wd-lyrics blockquote{font-size:19px;line-height:1.85}
 .ap-overview,.ap-work-style,.ip-bio{display:block}
 .wd-context{display:block}.wd-context>img{display:none}
 .ap-intro,.ip-intro{padding:24px 20px}
 .legacy-rich img{max-height:440px}
}

/* Compact archive hierarchy, separate from long-form article headings. */
.public-main .works-banner-copy h1{font-size:34px;line-height:1.22}
.public-main .work-tile h2{font:600 15px/1.5 var(--tgtc-ui);letter-spacing:0;margin:0 0 5px}
.public-main .works-featured>h2,.public-main .works-topics h2{font:600 13px/1.5 var(--tgtc-ui);letter-spacing:.03em}
.public-main .featured-name h3{font-size:22px;line-height:1.35}
@media(max-width:760px){
 .public-main .works-banner-copy h1{font-size:28px;line-height:1.25}
 .public-main .work-tile h2{font-size:14px;line-height:1.5}
 .public-main .works-featured>h2,.public-main .works-topics h2{font-size:13px}
}

/* Approved homepage mockup: compact sans hierarchy; serif only for editorial features. */
.public-main .home-page{font-family:var(--tgtc-ui)}
.public-main .home-section-title h2,.public-main .home-channels-block h2{font:700 14px/1.45 var(--tgtc-ui);letter-spacing:0;text-transform:uppercase;margin:0}
.public-main .home-work-card h3{font:600 14px/1.45 var(--tgtc-ui);letter-spacing:0;margin:6px 0 3px}
.public-main .home-video-row h3{font:600 13px/1.45 var(--tgtc-ui);letter-spacing:0;margin:1px 0 4px}
.public-main .home-work-card .home-credit{font:400 12px/1.5 var(--tgtc-ui)}
.public-main .home-work-card .home-excerpt{font:400 12px/1.55 var(--tgtc-ui)}
.public-main .home-video-row .home-credit,.public-main .home-video-row .home-excerpt{font:400 11px/1.55 var(--tgtc-ui)}
.public-main .home-lead-story h3{font:400 18px/1.4 var(--tgtc-reading);letter-spacing:-.015em}
.public-main .home-lead-story p{font:400 12px/1.55 var(--tgtc-ui)}
.public-main .home-small-stories b{font:500 11px/1.45 var(--tgtc-ui)}
.public-main .home-small-stories small{font:400 10px/1.5 var(--tgtc-ui)}
.public-main .home-collection-grid h3{font:500 13px/1.4 var(--tgtc-ui)}
.public-main .home-hero-copy :is(h1,h2){font:400 40px/1.12 var(--tgtc-reading);letter-spacing:-.025em}
@media(max-width:700px){
 .public-main .home-section-title h2,.public-main .home-channels-block h2{font-size:12px;line-height:1.5}
 .public-main .home-work-card h3{font-size:14px;margin:0 0 3px}
 .public-main .home-video-row h3{font-size:13px}
 .public-main .home-work-card .home-credit{font-size:11px}
 .public-main .home-work-card .home-excerpt{font-size:12px;line-height:1.5}
 .public-main .home-lead-story h3{font-size:17px}
 .public-main .home-hero-copy :is(h1,h2){font-size:32px;line-height:1.2}
}

/* Shared archive scale from approved compact editorial mockup. */
.public-main :is(.aa-banner,.ar-banner,.st-hero,.cv-hero,.vv-hero,.em-hero) h1{font:400 34px/1.22 var(--tgtc-reading);letter-spacing:-.02em}
.public-main :is(.aa-heading,.aa-list-title,.aa-sidebar,.ar-heading,.st-section-title,.cv-section-title,.em-heading,.em-panel) h2{font:600 16px/1.45 var(--tgtc-ui);letter-spacing:0}
@media(max-width:760px){
 .public-main :is(.aa-banner,.ar-banner,.st-hero,.cv-hero,.vv-hero,.em-hero) h1{font-size:28px;line-height:1.25}
 .public-main :is(.aa-heading,.aa-list-title,.aa-sidebar,.ar-heading,.st-section-title,.cv-section-title,.em-heading,.em-panel) h2{font-size:14px}
}

/* Article hierarchy: quiet metadata, readable story, modest titles. */
.public-main .wd-hero h1{font-size:36px;line-height:1.25}
.public-main .wd-section>h2{font:600 16px/1.5 var(--tgtc-ui)}
.public-main .legacy-rich h2{font:500 23px/1.4 var(--tgtc-reading)}
.public-main .wd-author h3{font-size:20px}
@media(max-width:760px){
 .public-main .wd-hero h1{font-size:28px}
 .public-main .legacy-rich h2{font-size:21px}
 .public-main .wd-section>h2{font-size:15px}
}

/* Individually edited profiles retain a compact editorial hierarchy. */
.public-main .ap-intro h1,.public-main .ip-intro h1{font-size:36px;line-height:1.25}
.public-main .ap-section>h2,.public-main .ip-heading>h2{font:600 16px/1.5 var(--tgtc-ui)}
.public-main .ap-section .legacy-rich h2,.public-main .ip-section .legacy-rich h2{font:500 23px/1.4 var(--tgtc-reading)}
.public-main .ap-biography,.public-main .ip-biography-text{max-width:66ch}
.public-main .ap-hero,.public-main .ip-hero{align-items:start}
.public-main .ap-work-card h3,.public-main .ip-recording h3{font:600 14px/1.5 var(--tgtc-ui)}
.public-main .ip-hero figure figcaption{font:400 11px/1.5 var(--tgtc-ui);padding:8px;color:var(--tgtc-muted)}
@media(max-width:760px){
 .public-main .ap-intro h1,.public-main .ip-intro h1{font-size:28px}
 .public-main .ap-section>h2,.public-main .ip-heading>h2{font-size:15px}
 .public-main .ap-section .legacy-rich h2,.public-main .ip-section .legacy-rich h2{font-size:21px}
}
.public-main .ip-intro>p{color:#f5e8d7}.public-main .ip-intro>h2{font:400 18px/1.5 var(--tgtc-reading);color:#f5e8d7}.public-main .ip-hero figure figcaption{color:#f5e8d7;background:#302419}

.public-main .artist-profile[data-editorial*="manual"] .ip-hero figure{margin:0;align-self:start}
.public-main .artist-profile[data-editorial*="manual"] .ip-hero figure>img{width:100%;height:360px;object-fit:cover;object-position:center 20%}
.public-main .artist-profile[data-editorial*="manual"] .ip-bio details[open]>summary,.public-main .author-profile[data-editorial*="manual"] .ap-timeline details[open]>summary{display:none}
@media(max-width:760px){.public-main .artist-profile[data-editorial*="manual"] .ip-hero figure>img{height:320px}}

/* Works archive audit against approved 02-tac-pham mockup, isolated scope. */
.public-main .works-banner-copy h1{font:400 38px/1.14 var(--tgtc-reading);letter-spacing:-.025em}
.public-main .works-banner-copy p{font:400 12px/1.6 var(--tgtc-ui);max-width:360px}
.public-main .work-tile h2{font:600 13px/1.45 var(--tgtc-ui);margin:0 0 3px;letter-spacing:0}
.public-main .work-tile-author{font-size:11px;line-height:1.5}
.public-main .work-tile-year{font-size:10px;line-height:1.5}
.public-main .work-tile-image{aspect-ratio:2/1;background:#e9ddcb}
.public-main .work-tile img{width:100%;height:100%;aspect-ratio:2/1;object-fit:cover}
.public-main .works-grid{gap:16px 17px}
.public-main .works-featured>h2,.public-main .works-topics h2{font:600 12px/1.5 var(--tgtc-ui)}
.public-main .featured-name h3{font:500 23px/1.3 var(--tgtc-reading)}
.public-main .featured-summary{font:400 12px/1.65 var(--tgtc-ui);margin-bottom:12px}
.public-main .works-featured>a>img{aspect-ratio:1.9;object-fit:cover}
.public-main .works-topic-grid>a{height:64px}
.public-main .works-topic-grid b{font-size:11px;line-height:1.4}
.public-main .works-topic-grid small{font-size:9px;line-height:1.4}
@media(max-width:650px){
 .public-main .works-banner-copy h1{font-size:28px;line-height:1.2}
 .public-main .works-banner-copy p{font-size:11px;line-height:1.55}
 .public-main .work-tile h2{font-size:13px;line-height:1.45}
 .public-main .work-tile-image{width:88px;height:62px;aspect-ratio:auto}
 .public-main .work-tile img{width:88px;height:62px;aspect-ratio:auto}
 .public-main .work-tile-author,.public-main .work-tile-year{font-size:11px}
 .public-main .works-topic-grid>a{height:79px}
}

/* Work detail audit: approved 10-chi-tiet-tac-pham layout. */
.public-main .work-dossier{font-family:var(--tgtc-ui);font-size:14px}
.public-main .wd-layout{grid-template-columns:minmax(0,1fr) 250px;gap:20px}
.public-main .wd-hero{grid-template-columns:42% minmax(0,1fr);gap:20px;align-items:start}
.public-main .wd-hero h1{font:600 34px/1.18 var(--tgtc-reading);letter-spacing:-.025em;margin:4px 0 13px}
.public-main .wd-hero figure>img{height:255px;object-fit:cover}
.public-main .wd-hero .wd-lead{font:italic 16px/1.6 var(--tgtc-reading);color:var(--tgtc-ink);max-width:54ch;margin:0}
.public-main .wd-byline{font:400 12px/1.6 var(--tgtc-ui)}
.public-main .wd-actions{margin:13px 0}
.public-main .wd-top-grid{grid-template-columns:1fr 1fr;gap:0 22px}
.public-main .wd-top-grid>#context,.public-main .wd-top-grid>#story{grid-column:auto}
.public-main .wd-section{padding:14px 0;margin:0;border-bottom:1px solid var(--wd-line)}
.public-main .wd-section>h2,.public-main .wd-fold>summary{font:600 16px/1.4 var(--tgtc-reading);margin:0 0 11px}
.public-main .wd-section p{font:400 13px/1.65 var(--tgtc-ui);margin:0 0 8px}
.public-main .wd-section h3{font:600 16px/1.4 var(--tgtc-reading)}
.public-main .wd-author{grid-template-columns:32% minmax(0,1fr);gap:14px}
.public-main .wd-author-portrait{width:100%;height:150px;object-fit:cover;object-position:center 20%;border-radius:4px}
.public-main .wd-author p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.public-main .wd-document img{height:150px}
.public-main .wd-context{grid-template-columns:27% minmax(0,1fr);gap:12px}
.public-main .wd-story-expand>summary{font:400 12px/1.6 var(--tgtc-ui);color:var(--wd-rust);cursor:pointer;padding:5px 0}
.public-main #story:has(.wd-story-expand[open]){grid-column:1/-1}
.public-main .wd-story-reading{padding:18px 0;max-width:68ch}
.public-main .wd-story-reading .legacy-rich{font:400 17px/1.8 var(--tgtc-reading)}
.public-main .wd-story-reading .legacy-rich p{font:inherit;margin:0 0 1em}
.public-main .wd-story-reading .legacy-rich h2{font:500 22px/1.4 var(--tgtc-reading)}
.public-main .wd-music-grid{grid-template-columns:1fr 1.3fr 1.1fr;gap:18px}
.public-main .wd-lyrics blockquote{font:italic 16px/1.65 var(--tgtc-reading);padding:14px}
.public-main .wd-sidebar .wd-facts :is(dt,dd){font:400 12px/1.6 var(--tgtc-ui)}
.public-main .wd-sidebar h2,.public-main .wd-facts>summary{font:600 16px/1.4 var(--tgtc-reading)}
.public-main .wd-toc nav{font:400 12px/1.6 var(--tgtc-ui);gap:12px}
.public-main .wd-recording h3{font:600 13px/1.4 var(--tgtc-ui)}
@media(max-width:1000px) and (min-width:701px){.public-main .wd-layout{grid-template-columns:minmax(0,1fr) 215px;gap:16px}.public-main .wd-hero h1{font-size:28px}.public-main .wd-music-grid{grid-template-columns:1fr 1fr}.public-main .wd-music-grid #score{grid-column:1/-1}}
@media(max-width:700px){
 .public-main .wd-layout,.public-main .wd-hero{display:block}
 .public-main .wd-hero figure>img{height:215px}
 .public-main .wd-hero h1{font-size:26px;margin:12px 0 9px}
 .public-main .wd-hero .wd-lead{font-size:15px;line-height:1.65}
 .public-main .wd-top-grid,.public-main .wd-music-grid{display:flex;flex-direction:column}
 .public-main .wd-section{padding:15px 0}
 .public-main .wd-section>h2,.public-main .wd-fold>summary{font-size:16px}
 .public-main .wd-author{grid-template-columns:95px minmax(0,1fr)}
 .public-main .wd-author-portrait{height:120px}
 .public-main .wd-context{display:grid;grid-template-columns:85px minmax(0,1fr)}
 .public-main .wd-context>img{display:block;height:100px}
 .public-main .wd-story-reading{max-width:100%}
 .public-main .wd-lyrics blockquote{font-size:16px}
}

/* Related works are compact cards, independent of article headings. */
.public-main .work-dossier #related>h2{font:600 14px/1.4 var(--tgtc-reading);letter-spacing:0;margin:0 0 8px}
.public-main .work-dossier #related>h2>svg{width:16px;height:17px;margin-right:6px}
.public-main .work-dossier .wd-related h3{font:600 11px/1.4 var(--tgtc-ui);letter-spacing:0;margin:4px 0 2px}
.public-main .work-dossier .wd-related h3 a{font:inherit}
.public-main .work-dossier .wd-related small{font:400 10px/1.4 var(--tgtc-ui)}
.public-main .work-dossier .wd-related img{height:58px}
.public-main .work-dossier .wd-related-controls .text-link{font:400 11px/1.5 var(--tgtc-ui)}
@media(max-width:700px){
 .public-main .work-dossier #related>h2{font-size:14px}
 .public-main .work-dossier .wd-related h3{font-size:11px}
 .public-main .work-dossier .wd-related img{height:60px}
}

/* Work artwork: preserve the complete source frame at every card size. */
.public-main :is(.work-tile-image img,.works-featured>a>img,.home-work-card img,.wd-hero figure>img,.wd-recording img,.wd-related img,.ap-work-card img,.ip-recording-image img,.ip-linked-works img,.home-video-thumb img){
 object-fit:contain;object-position:center;background:#e9e0d3;
}
.public-main .work-tile-image{background:#e9e0d3}
.public-main .works-featured>a>img{width:100%;height:auto;aspect-ratio:1.9;object-fit:contain}
.public-main .wd-hero figure{background:#e9e0d3;border-radius:5px;overflow:hidden}
.public-main .wd-hero figure>img{object-fit:contain;object-position:center}
.public-main .wd-hero figcaption{max-width:calc(100% - 24px);font-size:9px}
