/* ================================================================
   PAGE FRAME — the dark content system from the Dark Premium concept
   (page head, prose, cards, pills, pagination, forms). Used by every
   template that is not an editorial (.ed) channel/department page:
   generic pages, posts, archives, search, 404, singles, store pages.
   Prefix: .pg-   Tokens only (tcn-base.css section 0).
   Parts: template-parts/content/*.php
   ================================================================ */
.pg { background: var(--paper); color: var(--ink); font-family: var(--dp-sans); min-height: 70vh; }
.pg-wrap { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.pg-wrap--narrow { width: min(820px, calc(100% - 48px)); }

/* page head: the template's navy hero (ring pattern), clears the fixed header */
.pg-head { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 64px; background: var(--navy); color: #fff; border: 0;
    --paper: var(--navy); --paper-2: var(--navy-2); --panel: var(--navy-2); --panel-2: var(--navy-3);
    --ink: #fff; --muted: #b7c8e4; --faint: #8da3c7; --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.34);
    --accent: var(--teal); --on-accent: #021018; --inverse: var(--navy); }
.pg-head::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8;
    background:
      repeating-radial-gradient(ellipse at 42% 58%, transparent 0 18px, color-mix(in srgb, var(--ed-default) 30%, transparent) 19px 20px, transparent 21px 35px),
      linear-gradient(110deg, color-mix(in srgb, var(--ed-default) 40%, transparent), transparent 58%); }
.pg-head--art { padding-bottom: 72px; }
.pg-head-art { position: absolute; inset: 0; z-index: -2; background: center/cover no-repeat; filter: saturate(.8); opacity: .35; }
.pg-head--art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,20,47,.55), var(--navy) 95%); }
.pg-eyebrow { margin: 0; font: 800 10px/1 var(--dp-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pg-title { margin: 14px 0 16px; font-family: var(--dp-display); font-weight: 400; font-size: clamp(54px, 8vw, 118px); line-height: .84; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-shadow: 0 6px 34px rgba(0,0,0,.36); overflow-wrap: anywhere; }
.pg-title--sm { font-size: clamp(40px, 5.5vw, 78px); }
.pg-lede { max-width: 580px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.pg-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pg-chip { display: inline-flex; padding: 7px 11px; border: 0; border-radius: 4px; background: #fff; color: #07142f; font: 800 9px/1 var(--dp-sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pg-chip--accent { background: var(--teal); color: #021018; }
.pg-chip--alert { background: var(--red); color: #fff; }
.pg-body { padding: 64px 0 120px; background: var(--paper); }

/* buttons: the template's .dts-action (square, small caps) */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border: 1px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font: 800 10px var(--dp-sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pg-btn:hover { background: var(--ink); color: var(--inverse); }
.pg-btn--primary { background: var(--ink); color: var(--inverse); }
.pg-btn--primary:hover { background: var(--teal); border-color: var(--teal); color: #021018; }

/* prose: WordPress content */
.pg-prose { color: var(--muted); font-size: 16px; line-height: 1.85; }
.pg-prose > *:first-child { margin-top: 0; }
.pg-prose h1, .pg-prose h2, .pg-prose h3, .pg-prose h4 { font-family: var(--dp-serif); font-weight: 400; letter-spacing: .015em; color: var(--ink); line-height: 1.05; margin: 2.2em 0 .6em; text-transform: uppercase; }
.pg-prose h2 { font-size: clamp(30px, 4vw, 46px); }
.pg-prose h3 { font-size: clamp(24px, 3vw, 32px); }
.pg-prose h4 { font-size: 22px; }
.pg-prose p, .pg-prose li { margin: 0 0 1.1em; }
.pg-prose strong, .pg-prose b { color: var(--ink); font-weight: 600; }
.pg-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pg-prose a:hover { text-decoration-color: var(--accent); }
.pg-prose ul, .pg-prose ol { padding-left: 1.4em; margin: 0 0 1.4em; }
.pg-prose li::marker { color: var(--accent); }
.pg-prose img, .pg-prose video, .pg-prose iframe { max-width: 100%; border-radius: 4px; }
.pg-prose figure { margin: 2em 0; }
.pg-prose figcaption { margin-top: 8px; font-size: 12px; color: var(--faint); }
.pg-prose blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); font-family: var(--dp-serif); font-size: 24px; line-height: 1.4; color: var(--ink); text-transform: uppercase; }
.pg-prose hr { margin: 3em 0; }
.pg-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 14px; }
.pg-prose th, .pg-prose td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.pg-prose th { background: var(--panel); color: var(--ink); font-weight: 600; }
.pg-prose code { padding: 2px 6px; border-radius: 4px; background: var(--panel-2); color: var(--ink); font-size: .9em; }
.pg-prose pre { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); overflow: auto; }
.pg-prose input, .pg-prose select, .pg-prose textarea { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font: inherit; max-width: 100%; }
.pg-prose button, .pg-prose input[type=submit] { background: var(--ink); color: var(--inverse); border: 0; border-radius: 999px; padding: 12px 22px; font: 700 13px var(--dp-sans); cursor: pointer; }
.pg-prose .wp-block-button__link { background: var(--ink); color: var(--inverse); border-radius: 999px; text-decoration: none; }
.pg-prose .alignwide, .pg-prose .alignfull { max-width: 100%; }

/* media (video / audio / embed / photo) */
.pg-media { margin: 0 0 40px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.pg-media--video { position: relative; padding-bottom: 56.25%; height: 0; }
.pg-media--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pg-media--audio { padding: 26px; }
.pg-media--audio audio { width: 100%; }
.pg-media img { display: block; width: 100%; }

/* filter pills */
.pg-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 26px 0 0; }
.pg-filter { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 600 12px var(--dp-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.pg-filter:hover { color: var(--ink); border-color: var(--line-strong); }
.pg-filter.is-on { background: var(--ink); color: var(--inverse); border-color: var(--ink); }

/* card grid */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 40px 20px; }
.pg-card { display: block; color: var(--ink); text-decoration: none; }
.pg-card[hidden] { display: none; }
.pg-card-art { position: relative; aspect-ratio: 4 / 3; background: var(--panel-2) center/cover no-repeat; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 14px; overflow: hidden; display: grid; place-items: center; transition: border-color .2s, transform .25s; }
.pg-card:hover .pg-card-art { border-color: var(--line-strong); transform: translateY(-3px); }
.pg-card-art .pg-chip { position: absolute; left: 10px; top: 10px; padding: 5px 9px; background: rgba(9,9,9,.78); font-size: 9px; }
.pg-card-art .pg-chip--lock { left: auto; right: 10px; }
.pg-card-art > span { font-family: var(--dp-serif); font-size: 24px; padding: 14px; text-align: center; color: var(--ink); text-transform: uppercase; }
.pg-card h3 { margin: 0 0 5px; font: 600 14px/1.35 var(--dp-sans); letter-spacing: 0; color: var(--ink); }
.pg-card p { margin: 0; font-size: 12px; color: var(--muted); }
.pg-card .pg-card-sub { color: var(--accent); }

/* pagination */
.pg-pag { margin-top: 56px; }
.pg-pag ul.page-numbers { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pg-pag .page-numbers a, .pg-pag .page-numbers span, .pg-pag a.page-numbers, .pg-pag span.page-numbers { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; text-decoration: none; }
.pg-pag .page-numbers a:hover, .pg-pag a.page-numbers:hover { color: var(--ink); border-color: var(--line-strong); }
.pg-pag .current { background: var(--ink); color: var(--inverse) !important; border-color: var(--ink) !important; font-weight: 700; }
.pg-pag .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.pg-empty { padding: 90px 0; text-align: center; color: var(--muted); }
.pg-empty h2 { margin: 0 0 12px; font-family: var(--dp-serif); font-weight: 400; font-size: 44px; letter-spacing: .015em; color: var(--ink); text-transform: uppercase; }

/* search form */
.pg-search { display: flex; max-width: 560px; margin-top: 28px; }
.pg-search input { flex: 1; min-width: 0; padding: 15px 22px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-right: 0; border-radius: 999px 0 0 999px; font: 500 14px var(--dp-sans); outline: none; }
.pg-search input:focus { border-color: var(--accent); }
.pg-search button { padding: 0 24px; border: 1px solid var(--accent); border-radius: 0 999px 999px 0; background: var(--accent); color: var(--on-accent); font: 700 13px var(--dp-sans); cursor: pointer; }

/* related */
.pg-related { margin-top: 90px; padding-top: 60px; border-top: 1px solid var(--line); }
.pg-related h2 { margin: 0 0 32px; font-family: var(--dp-serif); font-weight: 400; font-size: clamp(32px, 4vw, 48px); letter-spacing: .015em; text-transform: uppercase; }

/* 404 */
.pg-404 { min-height: 80vh; display: grid; place-items: center; text-align: center; padding: 150px 24px 100px; }
.pg-404 .pg-title { font-size: clamp(90px, 18vw, 240px); margin: 10px 0; }
.pg-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 900px) {
    .pg-wrap, .pg-wrap--narrow { width: min(100% - 36px, 760px); }
    .pg-head { padding: 110px 0 40px; }
    .pg-body { padding: 40px 0 100px; }
    .pg-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
}
@media (max-width: 520px) { .pg-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pg * { transition: none !important; } }

/* ── WooCommerce page frame (cart, checkout, order, my-account endpoints) ── */
.tcn-wc-page .button, .tcn-wc-page button[type=submit], .tcn-wc-page .tcn-checkout-empty-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 1px solid var(--ink); border-radius: 999px;
    background: var(--ink); color: var(--inverse); font: 700 13px var(--dp-sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.tcn-wc-page .button:hover, .tcn-wc-page button[type=submit]:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── single content: locked state, info list, share ── */
.pg-audio-art { display: block; width: 100%; max-width: 280px; margin: 0 auto 18px; border-radius: 4px; }
.pg-lock { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 0 40px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--panel); }
.pg-lock-art { position: relative; min-height: 280px; background: var(--panel-2) center/cover no-repeat; filter: saturate(.8); }
.pg-lock-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; background: rgba(9,9,9,.55); }
.pg-lock-msg { padding: 40px 32px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.pg-lock-msg h2 { margin: 0 0 8px; font-family: var(--dp-serif); font-weight: 400; font-size: 38px; letter-spacing: .015em; text-transform: uppercase; }
.pg-lock-msg p { margin: 0; color: var(--muted); }
.pg-lock:not(:has(.pg-lock-art)) { grid-template-columns: 1fr; }
.pg-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; margin: 48px 0 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.pg-info > div { padding: 18px 20px; border-right: 1px solid var(--line); }
.pg-info > div:last-child { border-right: 0; }
.pg-info dt { font: 600 10px/1 var(--dp-sans); letter-spacing: .15em; text-transform: uppercase; color: var(--faint); }
.pg-info dd { margin: 8px 0 0; font-size: 14px; color: var(--ink); }
.pg-info dd a { color: var(--accent); text-decoration: none; }
.pg-actions--left { justify-content: flex-start; margin-top: 24px; }
@media (max-width: 700px) { .pg-lock { grid-template-columns: 1fr; } .pg-info > div { border-right: 0; border-bottom: 1px solid var(--line); } }

/* embedded tool apps (tcn_tool posts carry their own markup, built for a light page): shown as a light app window */
.pg-app { background: var(--light-paper); color: var(--light-ink); border-radius: 6px; padding: clamp(18px, 3vw, 36px); line-height: 1.6; }
.pg-app h1, .pg-app h2, .pg-app h3, .pg-app h4, .pg-app strong, .pg-app b, .pg-app label { color: var(--light-ink); }
.pg-app p, .pg-app li, .pg-app td, .pg-app th { color: inherit; }
.pg-app a { color: #0b6b78; }
.pg-app input, .pg-app select, .pg-app textarea { background: #fff; color: var(--light-ink); border: 1px solid #c7cfdc; }
.pg-app table { background: #fff; }
.pg-app th { background: #e7edf4; color: var(--light-ink); }
.pg-app td { border-color: #d6dce6; }
.pg-app button, .pg-app input[type=submit] { background: var(--light-ink); color: #fff; }
.pg-app img { border-radius: 4px; }

/* ── WooCommerce forms / notices (cart, checkout, account endpoints) ── */
/* WooCommerce + custom cart/checkout/product surfaces */
body.woocommerce, body.woocommerce-page { background: var(--paper); }
.woocommerce div.product, .woocommerce-page div.product { color: var(--ink); }
.woocommerce div.product .product_title { font-family: var(--dp-serif); font-weight: 400; letter-spacing: .015em; font-size: clamp(40px, 5vw, 72px); line-height: .95; text-transform: uppercase; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ink); font-weight: 600; }
.woocommerce table.shop_table, .woocommerce-checkout #payment, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-cart table.cart td, .select2-container--default .select2-selection--single {
    background: var(--panel) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { border-radius: 10px; padding: 12px 14px; }
.woocommerce-message, .woocommerce-info { background: var(--panel); color: var(--ink); border-top-color: var(--accent); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--accent); }

/* ── legacy hero markup (.dpt2-detail-hero: contact, instrumentals, tools, drops …): the template's navy hero ── */
.dpt2-detail-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 !important; padding: 150px 0 56px !important; background: var(--navy) !important; color: #fff;
    --paper: var(--navy); --panel: var(--navy-2); --panel-2: var(--navy-3); --ink: #fff; --muted: #b7c8e4; --faint: #8da3c7; --line: rgba(255,255,255,.16); --line-strong: rgba(255,255,255,.34); --accent: var(--teal); --on-accent: #021018; --inverse: var(--navy);
    --clr-bg: var(--navy); --clr-text-main: #fff; --clr-text-muted: #b7c8e4; --clr-invert-text: #fff; --clr-invert-text-muted: #b7c8e4; --dept-color: var(--teal); }
.dpt2-detail-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .8;
    background: repeating-radial-gradient(ellipse at 42% 58%, transparent 0 18px, color-mix(in srgb, var(--ed-default) 30%, transparent) 19px 20px, transparent 21px 35px), linear-gradient(110deg, color-mix(in srgb, var(--ed-default) 40%, transparent), transparent 58%); }
.dpt2-detail-hero-bg, .tcn-blob-veil, .tcn-dotgrid-veil { display: none !important; }
.dpt2-detail-hero-inner { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.dpt2-badge { display: inline-flex; padding: 7px 11px; border: 0; border-radius: 4px; background: #fff; color: #07142f; font: 800 9px/1 var(--dp-sans); letter-spacing: .1em; text-transform: uppercase; }
.dpt2-detail-title { margin: 12px 0 14px; font-family: var(--dp-display); font-weight: 400; font-size: clamp(54px, 8vw, 118px); line-height: .84; letter-spacing: .005em; text-transform: uppercase; color: #fff; text-shadow: 0 6px 34px rgba(0,0,0,.36); }
.dpt2-detail-hero p, .pr-hero-sub { color: #b7c8e4; }
@media (max-width: 900px) { .dpt2-detail-hero { padding: 110px 0 40px !important; } .dpt2-detail-hero-inner { width: min(100% - 36px, 760px); } }

/* Shared pill (back links, filters): mint-tinted, hairline accent border, round dot with the glyph. Same look as the Gain Access department pills. */
.pg-pill.pg-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 7px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--navy) !important; font: 700 13px/1 var(--dp-sans); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color .15s, background .15s; }
.pg-pill.pg-pill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, #fff); color: var(--navy) !important; }
.pg-pill-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--navy); color: #fff !important; font-size: 11px; font-weight: 800; }

/* mesh with the home page: plain page heads are white (no navy ring band), Dela Gothic titles */
.pg-head::before { display: none; }
.pg-head:not(.pg-head--art) { background: #fff; color: #0a0a0a; border-bottom: 1px solid #e9ecf1; padding: 130px 0 40px;
    --paper: #fff; --paper-2: #f1f4f9; --panel: #fff; --panel-2: #f1f4f9;
    --ink: #0a0a0a; --muted: #5b6472; --faint: #8a93a0; --line: rgba(10,10,10,.12); --line-strong: rgba(10,10,10,.28);
    --accent: var(--teal-2); --on-accent: #fff; --inverse: #fff; }
.pg-title { font-family: "Dela Gothic One", var(--dp-display); font-size: clamp(30px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -.035em; text-shadow: none; }
.pg-title--sm { font-size: clamp(26px, 3.4vw, 44px); }
.pg-404 .pg-title { font-size: clamp(70px, 14vw, 180px); }
/* page titles: calm sizes, more air under the fixed header */
.pg-head:not(.pg-head--art) { padding: 150px 0 44px; }
.pg-title { font-size: clamp(26px, 3vw, 44px); line-height: 1.08; margin: 12px 0 14px; }
.pg-title--sm { font-size: clamp(22px, 2.4vw, 34px); }