:root{--bg:#f4f6ee;--raised:#fcfdf8;--fg:#1f2a1c;--dim:#5d6b55;--key:#3f6d2a;--accent:#b4652a;--border:#dde4d0;--corner:4px;--width:1200px;--font-head:'Libre Baskerville',system-ui,sans-serif;--font-body:'Karla',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.65 var(--font-body)}
img{max-width:100%;height:auto} a{color:var(--key);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--font-head);line-height:1.2;letter-spacing:-.01em;color:var(--fg)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.pg-page-width{max-width:var(--width);margin:0 auto;padding:0 1rem} .pg-page{max-width:var(--width);margin:0 auto;padding:1.2rem 1rem 3rem}
.pg-skip{position:absolute;left:-9999px} .pg-skip:focus{left:1rem;top:1rem;background:var(--raised);padding:.5rem;z-index:99}
.pg-page-head__in{max-width:var(--width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.pg-identity{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--font-head);color:var(--fg);text-decoration:none}
.pg-nav-links{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .pg-nav-links a{color:var(--fg);text-decoration:none;font-weight:600;font-size:.95rem}
.pg-hdr{background:var(--bg);border-bottom:1px solid var(--border)} .pg-page-head__in{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .pg-nav-links a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.pg-lede-box{margin:1rem 0 1.4rem} .pg-standfirst{font-size:1.12rem;max-width:46em;color:var(--dim)} .pg-lede-box{text-align:center} .pg-lede-box .pg-standfirst{margin-left:auto;margin-right:auto}
.pg-calc-area{margin:1.4rem 0 2rem}
.pg-tip{margin:1.4em 0;padding:.9em 1.1em;background:var(--raised);border-left:4px solid var(--accent);border-radius:0 var(--corner) var(--corner) 0}
.pg-math-box{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--raised);border:1px dashed var(--key);border-radius:var(--corner);overflow-x:auto}
.pg-table-holder{margin:1.2em 0;overflow-x:auto;border:1px solid var(--border);border-radius:var(--corner);background:var(--raised)}
.pg-grid-table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .pg-grid-table th,.pg-grid-table td{padding:.5em .75em;border-bottom:1px solid var(--border);text-align:left}
.pg-grid-table thead th{background:color-mix(in srgb,var(--border) 60%,var(--raised))}
ol.pg-sequence{padding-left:1.3em} ol.pg-sequence>li{margin:.5em 0}
.pg-graphic{margin:1.6em 0;text-align:center} .pg-graphic img{width:100%;max-width:720px;border-radius:var(--corner);border:1px solid var(--border);background:#fff} .pg-graphic figcaption{font-size:.9em;color:var(--dim)}
.pg-card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.pg-guide-card{display:block;padding:1.1rem;background:var(--raised);border-radius:var(--corner);border:1px solid var(--border);color:var(--fg);text-decoration:none}
.pg-guide-card b{display:block;font-family:var(--font-head);margin-bottom:.35rem} .pg-guide-card span{color:var(--dim);font-size:.92rem} .pg-guide-card:hover{border-color:var(--key)}
.pg-guide-card--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .pg-guide-card--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--fg) 14%,transparent)}
.pg-link-card__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .pg-link-card__txt{display:block;padding:1rem 1.1rem 1.1rem} .pg-link-card__txt>span{display:block}
.pg-blist a,.pg-brow,.pg-post__kicker{background:none!important}
.pg-read__meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--key)}
.pg-card-list--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .pg-card-list--feat>.pg-guide-card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .pg-card-list--feat>.pg-guide-card:first-child b{font-size:1.35rem}
.pg-blist{display:grid;gap:1rem;margin:1.2em 0} .pg-brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--raised);border:1px solid var(--border);border-radius:var(--corner);overflow:hidden;color:var(--fg);text-decoration:none}
.pg-brow .pg-link-card__img{height:100%;aspect-ratio:auto;min-height:126px} .pg-brow b{display:block;font-family:var(--font-head);font-size:1.12rem;margin-bottom:.3rem} .pg-brow .pg-link-card__txt>span{color:var(--dim);font-size:.93rem} .pg-brow:hover{border-color:var(--key)}
.pg-blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .pg-blist--min li{counter-increment:bl;border-top:1px solid var(--border)} .pg-blist--min li:last-child{border-bottom:1px solid var(--border)}
.pg-blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--fg);text-decoration:none} .pg-blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--font-head);color:var(--key)}
.pg-blist--min b{font-family:var(--font-head);font-size:1.15rem} .pg-blist--min span{color:var(--dim);font-size:.93rem} .pg-blist--min a:hover b{color:var(--key)}
.pg-post__head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--corner);overflow:hidden} .pg-post__head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.pg-post__ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .pg-post__ov h1,.pg-post__ov .pg-post__meta,.pg-post__ov .pg-post__kicker{color:#fff}
.pg-post__head--band{background:var(--key);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--corner)} .pg-post__head--band h1,.pg-post__head--band .pg-post__meta,.pg-post__head--band .pg-post__kicker{color:#fff}
.pg-post__head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .pg-post__head--split .pg-post__cover{margin:0}
.pg-contents--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .pg-contents--chips li{margin:0} .pg-contents--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--bg);text-decoration:none;font-size:.88rem}
.pg-contents--rail{background:none;border:0;border-left:3px solid var(--accent);border-radius:0;padding:.2rem 0 .2rem 1rem}
.pg-language--globe summary{display:flex;align-items:center;gap:.35rem} .pg-langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .pg-langpills a{padding:.25rem .7rem;border:1px solid var(--border);border-radius:999px;text-decoration:none} .pg-langpills a[aria-current]{background:var(--key);border-color:var(--key);color:#fff}
@media (max-width:700px){.pg-card-list--feat{grid-template-columns:1fr} .pg-card-list--feat>.pg-guide-card:first-child{display:flex} .pg-brow{grid-template-columns:1fr} .pg-brow .pg-link-card__img{min-height:0;aspect-ratio:1200/630} .pg-post__head--split{grid-template-columns:1fr} .pg-post__ov{position:static;background:var(--key);padding:1.2rem} .pg-post__head--overlay>img{min-height:0}}
.pg-post{max-width:48rem;margin:0 auto} .pg-post__head{margin:.6rem 0 1.2rem} .pg-post__head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.pg-post__kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--key);text-decoration:none}
.pg-upd{color:var(--dim);font-size:.9rem;margin:2rem 0 0} .pg-sign{font-style:italic;color:var(--dim)} .pg-post__meta{color:var(--dim);font-size:.92rem;margin:0} .pg-post__cover{margin:0 0 1.6rem} .pg-post__cover img{display:block;width:100%;height:auto;border-radius:var(--corner)}
.pg-post .pg-standfirst{font-size:1.2rem;color:var(--fg)} .pg-post .pg-standfirst::first-letter{font-family:var(--font-head);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--key)}
.pg-post .pg-contents--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--raised);border:1px solid var(--border);border-left:4px solid var(--key);border-radius:var(--corner);font-size:.95rem}
.pg-contents--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .pg-contents--post li{margin:.2rem 0}
.pg-post h3{color:var(--key)} .pg-post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--accent);font-size:1.1em}
.pg-answers h3{font-size:1.05rem;margin-top:1.3em}
.pg-trail{font-size:.88rem;color:var(--dim);margin:.4rem 0 1rem} .pg-trail a{color:var(--dim)}
.pg-try-it{margin:2.4rem 0;padding:1.4rem;background:var(--raised);border-radius:var(--corner);border:1px solid var(--border);text-align:center}
.pg-pill-btn{display:inline-block;padding:.7em 1.4em;background:var(--key);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.pg-footer{border-top:1px solid var(--border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--dim);background:var(--raised)}
.pg-footer nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .pg-footer a{color:var(--dim)} .pg-footer{text-align:center} .pg-footer nav{justify-content:center}

.pg-contents{margin:1.2rem 0;padding:.8rem 1rem;background:var(--raised);border-radius:var(--corner);border:1px solid var(--border)} .pg-contents ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.pg-contents ol{columns:1}}
.pg-language{position:relative} .pg-language summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--border);border-radius:999px;font-size:.85rem}
.pg-language__list{position:absolute;right:0;top:120%;background:var(--raised);border:1px solid var(--border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.pg-language__list a{padding:.3rem .5rem;text-decoration:none;color:var(--fg)} .pg-language__list a[aria-current]{font-weight:700;color:var(--key)}
.pg-codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .pg-codes a{text-decoration:none;color:var(--dim);padding:.1rem .3rem;border-radius:4px} .pg-codes a[aria-current]{color:var(--key);background:color-mix(in srgb,var(--key) 12%,transparent)}
[data-slot]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-slot]:empty{margin:0}
[data-slot="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--raised)}
[data-slot="sidebar_left"],[data-slot="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-slot="sidebar_left"]{left:12px} [data-slot="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-slot="sidebar_left"],[data-slot="sidebar_right"]{display:none}}
.pg-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--dim)}
.pg-pill-btn{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.pg-table-holder{border:0;border-top:3px solid var(--key);border-radius:0;background:transparent} .pg-grid-table thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.pg-chunk a:not(.pg-pill-btn):not(.pg-guide-card){text-decoration-thickness:2px}
@media (max-width:640px){.pg-page-head__in{justify-content:center} .pg-nav-links{justify-content:center}}

/* Random Name Generator — tool styles. Colours, radius and fonts come only from the site tokens. */
.ng {
    --ng-tint: color-mix(in srgb, var(--key) 10%, var(--raised));
    --ng-tint2: color-mix(in srgb, var(--accent) 12%, var(--raised));
    --ng-soft: color-mix(in srgb, var(--border) 55%, transparent);
    --ng-r: var(--corner, 10px);
    --ng-rs: calc(var(--corner, 10px) * .6);
    color-scheme: inherit;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    outline: none;
    position: relative;
}
.ng *, .ng *::before, .ng *::after { box-sizing: border-box; }
.ng-cq { container-type: inline-size; container-name: ng; min-width: 0; }
.ng [hidden] { display: none !important; }
.ng-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ng svg { flex: none; }
.ng kbd {
    font: 600 .72em/1 var(--font-body); padding: .18em .42em; border-radius: 4px;
    border: 1px solid var(--border); background: var(--bg); color: var(--dim);
}
.ng button { font: inherit; color: inherit; }
.ng :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- tabs ---- */
.ng-tabs {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem;
    margin: 0 0 1rem; padding: .35rem; border-radius: var(--ng-r);
    background: var(--ng-tint); border: 1px solid var(--border);
}
.ng-tab {
    display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem;
    padding: .45rem .6rem; border: 1px solid transparent; border-radius: var(--ng-rs);
    background: transparent; color: var(--dim); cursor: pointer; font-weight: 600; font-size: .93rem;
    transition: background-color .18s, color .18s, box-shadow .18s;
}
.ng-tab__ico { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ng-tab kbd { display: none; }
.ng-tab:hover { color: var(--fg); background: color-mix(in srgb, var(--raised) 70%, transparent); }
.ng-tab[aria-selected="true"] {
    background: var(--raised); color: var(--key); border-color: var(--border);
    box-shadow: 0 1px 0 var(--border), 0 6px 16px -10px color-mix(in srgb, var(--fg) 40%, transparent);
}
@container ng (min-width: 1000px) { .ng-tab kbd { display: inline-block; } }

/* ---- layout ---- */
.ng-body { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.ng-form, .ng-res, .ng-sl {
    background: var(--raised); border: 1px solid var(--border); border-radius: var(--ng-r); padding: 1.1rem;
}
.ng-form { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
.ng-lead { margin: 0; color: var(--dim); font-size: .93rem; }
.ng-lead--persona { padding: .7rem .8rem; border-radius: var(--ng-rs); background: var(--ng-tint2); color: var(--fg); border-left: 3px solid var(--accent); }
.ng-f { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.ng-lbl { font: 700 .78rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding: 0; }
.ng-lbl small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ng-lbl--sm { font-size: .72rem; }
.ng-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.ng-filters .ng-row { grid-template-columns: 1fr; }
.ng-in {
    width: 100%; min-height: 2.6rem; padding: .5rem .7rem; font: inherit; font-size: .95rem;
    color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--ng-rs);
    color-scheme: inherit;
}
.ng-in:focus { border-color: var(--key); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--key) 22%, transparent); }
.ng-in:disabled { opacity: .55; }
.ng-in option, .ng-in optgroup { color: var(--fg); background: var(--raised); }
.ng-hint { margin: 0; font-size: .82rem; color: var(--dim); }

/* segmented, illustrated choices */
.ng-seg { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ng-opt { position: relative; cursor: pointer; }
.ng-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ng-opt span {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .35rem .7rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--fg);
    font-size: .88rem; font-weight: 600; transition: background-color .15s, border-color .15s, color .15s;
}
.ng-opt svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ng-opt:hover span { border-color: var(--key); }
.ng-opt input:checked + span { background: var(--key); border-color: var(--key); color: var(--raised); }
.ng-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ng-seg--gender { display: grid; grid-template-columns: 1fr 1fr; }
.ng-seg--gender .ng-opt span { width: 100%; justify-content: center; }
.ng-seg--parts { display: grid; grid-template-columns: 1fr 1fr; }
.ng-seg--parts .ng-opt span { width: 100%; flex-direction: column; align-items: flex-start; border-radius: var(--ng-rs); padding: .5rem .6rem; font-size: .82rem; }
.ng-blk { display: flex; gap: 3px; }
.ng-blk b { display: block; width: 18px; height: 7px; border-radius: 2px; background: currentColor; opacity: .85; }
.ng-blk b.m { width: 12px; opacity: .45; }
.ng-blk b.l { width: 22px; opacity: .65; }
.ng-seg--syl { gap: .3rem; }
.ng-seg--syl .ng-lbl { width: 100%; }
.ng-seg--syl .ng-opt span { min-width: 2.6rem; justify-content: center; padding: .3rem .55rem; }
.ng-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.ng-check input { width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--key); flex: none; }
.ng-opts { gap: .55rem; }
.ng-go { display: grid; grid-template-columns: 6.5rem 1fr; gap: .7rem; align-items: end; }
.ng-keys { margin: -.4rem 0 0; font-size: .78rem; color: var(--dim); }
@media (hover: none) { .ng-keys { display: none; } }

/* buttons */
.ng-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.6rem;
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--key); cursor: pointer;
    font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .12s, background-color .15s, box-shadow .15s;
}
.ng-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ng-btn--go { background: var(--key); color: var(--raised); font-family: var(--font-head); font-size: 1.05rem; box-shadow: 0 8px 18px -12px var(--key); }
.ng-btn--go:hover { background: color-mix(in srgb, var(--key) 86%, var(--fg)); }
.ng-btn--go:active { transform: translateY(1px); }
.ng-btn--ghost { background: transparent; color: var(--key); border-color: var(--border); }
.ng-btn--ghost:hover:not(:disabled) { border-color: var(--key); background: var(--ng-tint); }
.ng-btn--sm { min-height: 2.1rem; padding: .25rem .75rem; font-size: .83rem; }
.ng-btn:disabled { opacity: .45; cursor: default; }
.ng-ib {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
    border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--dim);
    transition: background-color .15s, color .15s, transform .15s;
}
.ng-ib:hover { background: var(--ng-tint); color: var(--key); }
.ng-ico { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ng-ib--star[aria-pressed="true"] { color: var(--accent); }
.ng-ib--star[aria-pressed="true"] .ng-ico { fill: currentColor; }
.ng-ib--star[aria-pressed="true"] { animation: ng-pop .3s ease-out; }

/* ---- results ---- */
.ng-res { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ng-pool { display: flex; flex-direction: column; gap: .35rem; }
.ng-pool__bar { height: 8px; border-radius: 999px; background: var(--ng-soft); overflow: hidden; }
.ng-pool__bar span { display: block; height: 100%; width: 0; border-radius: inherit;
    background: linear-gradient(90deg, var(--key), color-mix(in srgb, var(--key) 55%, var(--accent))); transition: width .35s ease; }
.ng-pool__txt { margin: 0; font-size: .88rem; color: var(--dim); }
.ng-pool.is-zero .ng-pool__txt { color: var(--accent); font-weight: 600; }
.ng-res__head, .ng-sl__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.ng-res__title, .ng-sl__title { margin: 0; font: 700 1.2rem/1.2 var(--font-head); color: var(--fg); display: flex; align-items: center; gap: .45rem; }
.ng-res__acts { display: flex; flex-wrap: wrap; gap: .35rem; }
.ng-note { margin: 0; padding: .55rem .75rem; border-radius: var(--ng-rs); background: var(--ng-tint2); font-size: .9rem; border-left: 3px solid var(--accent); }
.ng-list, .ng-sl__list, .ng-hist__list { list-style: none; margin: 0; padding: 0; }
.ng-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .7rem; }

.ng-card, .ng-slcard {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start;
    padding: .85rem .8rem .85rem .85rem; border-radius: var(--ng-r); background: var(--bg);
    border: 1px solid var(--border);
    background-image: linear-gradient(to bottom, transparent calc(100% - 4px), color-mix(in srgb, var(--key) 25%, transparent) 0);
}
.ng-card::before {
    content: ""; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 3px; border-radius: 0 3px 3px 0;
    background: var(--key); opacity: .55;
}
.ng-card--fantasy::before { background: var(--accent); }
.ng.is-fresh .ng-card { animation: ng-in .38s ease-out both; animation-delay: calc(var(--i, 0) * 35ms); }
.ng-card.is-new { animation: ng-in .3s ease-out both; }
.ng-card__body { min-width: 0; }
.ng-card__name, .ng-slcard__name {
    margin: 0; font: 700 1.22rem/1.25 var(--font-head); color: var(--fg); overflow-wrap: anywhere;
}
.ng-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: .45rem 0 0; padding: 0; }
.ng-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px;
    font-size: .76rem; font-weight: 600; color: var(--dim); background: var(--raised); border: 1px solid var(--border);
}
.ng-chip--female { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ng-chip--male { color: var(--key); border-color: color-mix(in srgb, var(--key) 40%, var(--border)); }
.ng-chip--unisex { color: var(--fg); background: var(--ng-tint); }
.ng-chip--ini { font-family: var(--font-head); letter-spacing: .04em; }
.ng-chip--warn { color: var(--raised); background: var(--accent); border-color: var(--accent); }
.ng-dots { display: inline-flex; gap: 2px; }
.ng-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ng-card__meaning { margin: .45rem 0 0; font-size: .86rem; color: var(--dim); font-style: italic; }
.ng-card__why, .ng-card__warn { margin: .45rem 0 0; display: flex; gap: .35rem; align-items: flex-start; font-size: .8rem; color: var(--key); }
.ng-card__why .ng-ico, .ng-card__warn .ng-ico { width: .95rem; height: .95rem; margin-top: .1rem; }
.ng-card__warn { color: var(--accent); font-weight: 600; }
.ng-acts { display: flex; flex-direction: column; gap: .1rem; margin: -.3rem -.3rem 0 0; }

/* monogram roundel */
.ng-mono { width: 3.1rem; height: 3.1rem; }
.ng-mono--big { width: 3.8rem; height: 3.8rem; }
.ng-mono__ring { fill: var(--ng-tint); stroke: var(--key); stroke-width: 1.5; }
.ng-mono__in { fill: none; stroke: color-mix(in srgb, var(--key) 45%, transparent); stroke-width: 1; stroke-dasharray: 2 2.5; }
.ng-mono__c { font: 700 23px/1 var(--font-head); fill: var(--key); }
.ng-mono__s { font: 600 12px/1 var(--font-head); fill: var(--dim); }
.ng-mono--fantasy .ng-mono__ring { fill: var(--ng-tint2); stroke: var(--accent); }
.ng-mono--fantasy .ng-mono__c, .ng-mono--username .ng-mono__c { fill: var(--accent); font-size: 22px; }
.ng-mono--username .ng-mono__ring { fill: var(--ng-tint2); stroke: var(--accent); }

/* persona card */
.ng-card--persona { grid-template-columns: minmax(0, 1fr); gap: .7rem; padding: 1rem; overflow: hidden; }
.ng-list:has(.ng-card--persona) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ng-p__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: center; padding-right: 4.8rem; }
.ng-p__stamp {
    position: absolute; top: .9rem; right: -.2rem; transform: rotate(8deg);
    font: 800 .66rem/1 var(--font-body); letter-spacing: .14em; color: var(--accent);
    border: 2px solid var(--accent); border-radius: 4px; padding: .3rem .45rem; opacity: .85; background: var(--bg);
}
.ng-p__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1rem; margin: 0; padding: .7rem 0 0; border-top: 1px dashed var(--border); }
.ng-p__row { min-width: 0; padding: .3rem 0; }
.ng-p__row dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.ng-p__row dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.ng-p__row--mono dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; }
.ng-p__row--none dd { color: var(--dim); font-style: italic; font-size: .82rem; }
.ng-acts--persona { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0; gap: .35rem; }
.ng-acts--persona .ng-btn { min-height: 2.2rem; padding: .25rem .75rem; font-size: .82rem; }

/* empty state */
.ng-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 1.6rem .8rem; color: var(--dim); }
.ng-empty svg { width: 7.5rem; height: auto; }
.ng-empty .c1 { fill: var(--ng-tint2); stroke: var(--border); }
.ng-empty .c2 { fill: var(--bg); stroke: var(--key); stroke-width: 1.5; }
.ng-empty .ln { stroke: var(--border); stroke-width: 4; stroke-linecap: round; }
.ng-empty p { margin: 0; max-width: 32rem; }

/* ---- shortlist ---- */
.ng-sl { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .8rem; background: var(--ng-tint); }
.ng-sl__title svg { width: 1.2rem; height: 1.2rem; fill: var(--accent); stroke: none; }
.ng-sl__count { font: 600 .85rem/1 var(--font-body); color: var(--dim); }
.ng-sl__note { margin: 0; font-size: .85rem; color: var(--accent); }
.ng-sl__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .7rem; }
.ng-slcard { background: var(--raised); transform: rotate(-.4deg); box-shadow: 0 8px 16px -14px color-mix(in srgb, var(--fg) 60%, transparent); }
.ng-slcard:nth-child(2n) { transform: rotate(.5deg); }
.ng-slcard__name { font-style: italic; }
.ng-slcard__meta { margin: .3rem 0 0; font-size: .8rem; color: var(--dim); }
.ng-sl__empty { margin: 0; color: var(--dim); font-size: .92rem; }
.ng-hist { border-top: 1px dashed var(--border); padding-top: .7rem; }
.ng-hist summary { cursor: pointer; font-weight: 700; color: var(--key); font-size: .92rem; }
.ng-hist__list { display: flex; flex-direction: column; gap: .45rem; margin-top: .6rem; }
.ng-hist__item { display: flex; gap: .7rem; align-items: center; justify-content: space-between; padding: .5rem .7rem; border-radius: var(--ng-rs); background: var(--raised); border: 1px solid var(--border); }
.ng-hist__txt { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; }
.ng-hist__txt span { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-hist__empty { color: var(--dim); font-size: .88rem; }

/* toast */
.ng-toast {
    position: fixed; left: 50%; bottom: 1.2rem; z-index: 50; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
    max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
    background: var(--fg); color: var(--bg); transition: opacity .2s, transform .2s;
}
.ng-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@keyframes ng-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ng-pop { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .ng *, .ng *::before { animation: none !important; transition: none !important; }
}

/* ---- responsive ---- */
@container ng (max-width: 860px) {
    .ng-body { grid-template-columns: minmax(0, 1fr); }
    .ng-form { position: static; }
}
@container ng (max-width: 640px) {
    .ng-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ng-tab { flex-direction: column; gap: .15rem; font-size: .8rem; padding: .4rem .2rem; text-align: center; line-height: 1.15; }
    .ng-form, .ng-res, .ng-sl { padding: .85rem; }
    .ng-p__grid { grid-template-columns: minmax(0, 1fr); }
    .ng-card__name { font-size: 1.12rem; }
    .ng-acts { flex-direction: row; grid-column: 1 / -1; justify-content: flex-end; margin: -.3rem -.3rem -.3rem 0; }
    .ng-card, .ng-slcard { grid-template-columns: auto minmax(0, 1fr); }
    .ng-acts--persona { justify-content: flex-start; }
}
@container ng (max-width: 380px) {
    .ng-seg--parts, .ng-seg--gender { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ng-go { grid-template-columns: 5.5rem 1fr; }
}

/* design: sites/<d>/design/site.css */
/* Open-air garden theatre programme — generator-name.org */
:root{--gp-hedge:var(--fg);--gp-rule:color-mix(in srgb,var(--fg) 70%,var(--border));--gp-hair:color-mix(in srgb,var(--fg) 22%,var(--border));--gp-dot:color-mix(in srgb,var(--fg) 40%,transparent);--gp-card:color-mix(in srgb,var(--raised) 70%,var(--bg));--gp-cream:var(--raised)}
body{background-color:var(--bg);background-image:radial-gradient(130% 60% at 50% 0,color-mix(in srgb,var(--raised) 70%,transparent),transparent 70%),repeating-linear-gradient(0deg,transparent 0 3px,color-mix(in srgb,var(--border) 22%,transparent) 3px 4px);background-attachment:scroll}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header: hedge-green proscenium with a scalloped pelmet ---------- */
.pg-hdr{border-bottom:0;padding-bottom:16px;background-color:transparent;
  background-image:linear-gradient(var(--gp-hedge),var(--gp-hedge)),linear-gradient(var(--accent),var(--accent)),radial-gradient(circle at 50% 0,var(--gp-hedge) 12.5px,transparent 13.5px);
  background-size:100% calc(100% - 16px),100% 2px,28px 14px;background-position:0 0,0 calc(100% - 15px),0 100%;background-repeat:no-repeat,no-repeat,repeat-x}
.pg-page-head__in{padding:1.1rem 1rem .9rem;gap:.55rem}
.pg-identity{color:var(--gp-cream);font-family:var(--font-head);font-variant:small-caps;letter-spacing:.06em;font-size:1.28rem;font-weight:700;text-decoration:none;gap:.6rem}
.pg-identity svg{flex:none;width:30px;height:30px;padding:4px;border:1px solid color-mix(in srgb,var(--raised) 45%,transparent);border-radius:50%;background:color-mix(in srgb,var(--key) 70%,var(--fg))}
.pg-identity svg path,.pg-identity svg rect{stroke:var(--raised)}
.pg-identity:hover{color:var(--raised)}
.pg-nav-links{gap:.2rem 1.4rem;justify-content:center;flex-wrap:wrap}
.pg-nav-links>a{color:color-mix(in srgb,var(--raised) 88%,var(--fg));text-decoration:none;font-weight:700;padding:.25rem 0;border-bottom:1px solid transparent;transition:border-color .15s,color .15s}
.pg-nav-links>a:hover{color:var(--raised);border-bottom-color:color-mix(in srgb,var(--raised) 50%,transparent)}
.pg-nav-links>a[aria-current]{color:var(--raised);border-bottom-color:var(--accent)}
.pg-hdr .pg-language summary{color:var(--fg);background:var(--raised);border:0;border-radius:2px;padding:.32rem .65rem;font:700 .76rem/1 var(--font-body);letter-spacing:.1em;box-shadow:inset 0 0 0 1px var(--raised),inset 0 0 0 2px color-mix(in srgb,var(--accent) 70%,var(--raised))}
.pg-hdr .pg-language summary svg{color:var(--key)}
.pg-language__list{border-radius:2px;border:1px solid var(--border);border-top:3px double var(--accent);box-shadow:0 14px 26px -14px color-mix(in srgb,var(--fg) 50%,transparent);min-width:10rem}
.pg-hdr .pg-language__list a{color:var(--fg);font-size:.93rem;padding:.42rem .65rem;border-bottom:1px dotted var(--border);text-transform:none;letter-spacing:0}
.pg-hdr .pg-language__list a:last-child{border-bottom:0}
.pg-hdr .pg-language__list a:hover{background:var(--bg);color:var(--key)}
.pg-hdr .pg-language__list a[aria-current]{color:var(--key);font-weight:700}

/* ---------- breadcrumbs: the programme's running head ---------- */
.pg-trail{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:1.1rem 0 1.2rem;padding-bottom:.45rem;border-bottom:1px solid var(--gp-hair)}
.pg-trail a{color:var(--dim);text-decoration:none;border-bottom:1px dotted var(--gp-dot)}
.pg-trail a:hover{color:var(--key);border-bottom-color:var(--key)}

/* ---------- first screen: programme title page ---------- */
.pg-lede-box{position:relative;margin:1.6rem 0 1.4rem;padding:2rem 2rem 1.7rem;background:var(--raised);border:1px solid var(--gp-rule);box-shadow:inset 0 0 0 5px var(--raised),inset 0 0 0 6px var(--gp-hair)}
.pg-lede-box::before{content:"";display:block;width:160px;height:20px;margin:0 auto .9rem;background:url(/assets/img/d-sprig.svg) center/contain no-repeat}
.pg-lede-box h1{font-size:clamp(1.75rem,4.2vw,2.75rem);line-height:1.15;letter-spacing:-.005em;text-wrap:balance;margin:0 auto .7rem;max-width:22ch}
.pg-lede-box .pg-standfirst{max-width:44rem;font-size:1.06rem;color:color-mix(in srgb,var(--fg) 78%,var(--dim))}
.pg-lede-box .pg-standfirst::after{content:"";display:block;width:5.5rem;margin:1.1rem auto 0;border-top:3px double var(--accent)}

/* tool: only the space around it */
.pg-calc-area{margin-top:1.2rem;margin-bottom:1.6rem}

/* ---------- contents: dramatis personae ---------- */
.pg-contents{counter-reset:act;margin:2rem 0 1.6rem;padding:1.1rem 1.4rem 1.2rem;background:var(--raised);border:0;border-radius:0;border-top:3px double var(--gp-rule);border-bottom:3px double var(--gp-rule);box-shadow:none}
.pg-contents>strong{display:flex;align-items:center;gap:.9rem;font:italic 700 1.08rem/1.2 var(--font-head);color:var(--fg);letter-spacing:.02em;margin-bottom:.5rem}
.pg-contents>strong::before,.pg-contents>strong::after{content:"";flex:1;border-top:1px solid var(--gp-hair)}
.pg-contents ol{list-style:none;padding:0;margin:.4rem 0 0;columns:2;column-gap:2.6rem}
.pg-contents li{counter-increment:act;display:flex;align-items:baseline;gap:.4rem;margin:0;padding:.28rem 0;break-inside:avoid}
.pg-contents li::after{content:counter(act,upper-roman);order:3;flex:none;min-width:1.8rem;text-align:right;font:italic 700 .9rem/1 var(--font-head);color:var(--accent)}
.pg-contents li::before{content:"";order:2;flex:1 1 1.2rem;min-width:1.2rem;border-bottom:2px dotted var(--gp-dot);transform:translateY(-.25em)}
.pg-contents li a{order:1;flex:0 1 auto;min-width:0;color:var(--fg);text-decoration:none;font-family:var(--font-head);font-size:.95rem;line-height:1.4}
.pg-contents li a:hover{color:var(--key);text-decoration:underline;text-decoration-color:var(--accent)}
.pg-post .pg-contents--post{background:var(--raised);border:0;border-left:0;border-radius:0;border-top:3px double var(--gp-rule);border-bottom:3px double var(--gp-rule);padding:1rem 1.3rem 1.1rem;margin:0 0 2rem;font-size:.95rem}
.pg-contents--post ol{columns:2;padding-left:0}
@media (max-width:700px){.pg-contents ol,.pg-contents--post ol{columns:1}.pg-contents{padding:1rem .9rem}}

/* ---------- sections: acts parted by sprig fleurons ---------- */
.pg-page{counter-reset:actn}
.pg-chunk{counter-increment:actn}
.pg-chunk+.pg-chunk::before,.pg-chunk+[data-slot]+.pg-chunk::before{content:"";display:block;width:160px;height:20px;margin:0 auto 1.8rem;background:url(/assets/img/d-sprig.svg) center/contain no-repeat;opacity:.9}
.pg-chunk>h2{font-family:var(--font-head);font-size:clamp(1.3rem,2.7vw,1.7rem);line-height:1.25;padding-bottom:.45rem;border-bottom:1px solid var(--gp-hair);text-wrap:balance}
.pg-contents~.pg-chunk>h2::before{content:counter(actn,upper-roman) ".";display:inline-block;min-width:1.9em;margin-right:.35rem;font-style:italic;color:var(--accent);font-weight:700}
.pg-chunk>h3{font-family:var(--font-head);font-size:1.1rem;margin-top:1.5em}
.pg-chunk>ul{list-style:none;padding-left:1.5rem}
.pg-chunk>ul>li{position:relative;margin:.45em 0}
.pg-chunk>ul>li::before{content:"";position:absolute;left:-1.35rem;top:.42em;width:.72rem;height:.72rem;background:url(/assets/img/d-leaf.svg) center/contain no-repeat}
.pg-chunk a:not(.pg-pill-btn):not(.pg-guide-card):not(.pg-brow){color:var(--key);text-decoration-color:color-mix(in srgb,var(--accent) 75%,transparent);text-decoration-thickness:1px;text-underline-offset:.18em}
.pg-chunk a:not(.pg-pill-btn):not(.pg-guide-card):not(.pg-brow):hover{text-decoration-thickness:2px;text-decoration-color:var(--accent)}

/* steps: numbered cues */
ol.pg-sequence{list-style:none;counter-reset:cue;padding-left:0;margin:1.2em 0;border-left:1px solid var(--gp-hair)}
ol.pg-sequence>li{counter-increment:cue;position:relative;padding:.15em 0 .15em 3.1rem;margin:.65em 0}
ol.pg-sequence>li::before{content:counter(cue);position:absolute;left:.75rem;top:.05em;width:1.7rem;font:italic 700 1.35rem/1.2 var(--font-head);color:var(--accent);text-align:center}
ol.pg-sequence>li::after{content:"";position:absolute;left:-1px;top:.45em;width:.55rem;border-top:1px solid var(--accent)}

/* tables: cast lists */
.pg-table-holder{border:0;border-radius:0}
.pg-grid-table{border-collapse:collapse;border:0;border-top:2px solid var(--gp-rule);border-bottom:2px solid var(--gp-rule);background:var(--raised);border-radius:0}
.pg-grid-table caption{caption-side:top;font:italic .95rem/1.4 var(--font-head);color:var(--dim);padding:0 0 .55rem;text-align:center}
.pg-grid-table th{background:transparent;color:var(--fg);font-family:var(--font-body);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;border:0;border-bottom:1px solid var(--gp-rule);padding:.65rem .8rem}
.pg-grid-table td{border:0;border-bottom:1px dotted var(--gp-dot);padding:.6rem .8rem;background:transparent}
.pg-grid-table tbody tr:last-child td{border-bottom:0}
.pg-grid-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.pg-grid-table td:first-child{font-family:var(--font-head);font-style:italic;color:var(--fg)}

/* notes: a loose programme insert */
.pg-tip{position:relative;background:var(--raised);border:1px solid var(--gp-hair);border-left:0;border-radius:0;padding:1rem 1.2rem 1rem 3rem;box-shadow:3px 3px 0 color-mix(in srgb,var(--border) 80%,transparent)}
.pg-tip::before{content:"";position:absolute;left:1rem;top:1.15rem;width:1.1rem;height:1.1rem;background:url(/assets/img/d-leaf.svg) center/contain no-repeat}
.pg-tip::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,var(--accent) 0 6px,transparent 6px 10px)}

/* formula: the prompt book line */
.pg-math-box{background:var(--raised);border:1px solid var(--gp-hair);border-left:3px solid var(--key);border-radius:0}

/* figures: framed production prints */
.pg-graphic{background:var(--raised);border:1px solid var(--gp-hair);padding:.8rem .8rem .7rem;box-shadow:inset 0 0 0 4px var(--raised),inset 0 0 0 5px color-mix(in srgb,var(--border) 70%,transparent)}
.pg-graphic img{border:1px solid var(--border);border-radius:0}
.pg-graphic figcaption{font:italic .9rem/1.45 var(--font-head);color:var(--dim);margin-top:.6rem}

/* FAQ: questions set like cue lines */
.pg-answers h3,#faq~h3{position:relative;padding-left:1.4rem}
.pg-answers h3::before,#faq~h3::before{content:"";position:absolute;left:0;top:.35em;width:.8rem;height:.8rem;background:url(/assets/img/d-leaf.svg) center/contain no-repeat}
details{border-bottom:1px dotted var(--gp-dot)}
summary{font-family:var(--font-head)}

/* ---------- guides: the running order ---------- */
.pg-blist{gap:0;border-top:2px solid var(--gp-rule);border-bottom:2px solid var(--gp-rule)}
.pg-brow{border:0;border-bottom:1px dotted var(--gp-dot);border-radius:0;grid-template-columns:200px 1fr;gap:1.4rem;padding:1rem .2rem;overflow:visible}
.pg-brow:last-child{border-bottom:0}
.pg-brow .pg-link-card__img{min-height:0;height:auto;aspect-ratio:1200/630;border:1px solid var(--border);box-shadow:0 0 0 3px var(--raised),0 0 0 4px var(--gp-hair);border-radius:0}
.pg-brow b{font-size:1.15rem;line-height:1.3;transition:color .15s}
.pg-brow:hover b{color:var(--key);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
.pg-brow .pg-read__meta{display:inline-block;margin-top:.45rem;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--accent);color:color-mix(in srgb,var(--accent) 72%,var(--fg))}
@media (max-width:700px){.pg-brow{grid-template-columns:1fr;gap:.8rem;padding:1.1rem 0}}

/* ---------- article ---------- */
.pg-post__head{padding-bottom:1.4rem;margin-bottom:1.8rem;border-bottom:3px double var(--gp-rule)}
.pg-post__kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:color-mix(in srgb,var(--accent) 72%,var(--fg));text-decoration:none}
.pg-post__kicker::before{content:"";width:1.6rem;border-top:1px solid var(--accent)}
.pg-post__kicker:hover{color:var(--key)}
.pg-post__head h1{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;text-wrap:balance}
.pg-post__meta{font:italic .95rem/1.4 var(--font-head);color:var(--dim)}
.pg-post__cover{background:var(--raised);padding:.6rem;border:1px solid var(--gp-hair);box-shadow:inset 0 0 0 3px var(--raised),inset 0 0 0 4px color-mix(in srgb,var(--border) 70%,transparent)}
.pg-post__cover img{border-radius:0;display:block;width:100%;height:auto}
.pg-post>.pg-standfirst{font-size:1.1rem}
.pg-post>.pg-standfirst::first-letter{font-family:var(--font-head);color:var(--accent)}
.pg-post .pg-chunk>h2{margin-top:.4rem}

/* ---------- call to action: a ticket with a perforated stub ---------- */
.pg-try-it{position:relative;margin:2.6rem auto;max-width:40rem;border:0;border-radius:0;box-shadow:none;padding:1.6rem 2.6rem 1.6rem 4.2rem;
  background:radial-gradient(circle at 0 50%,transparent 13px,var(--raised) 14px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 13px,var(--raised) 14px) right/51% 100% no-repeat;
  filter:drop-shadow(0 1px 0 var(--gp-hair)) drop-shadow(0 0 1px color-mix(in srgb,var(--fg) 35%,transparent))}
.pg-try-it::before{content:"";position:absolute;left:2.6rem;top:.7rem;bottom:.7rem;border-left:2px dashed color-mix(in srgb,var(--accent) 70%,transparent)}
.pg-pill-btn{border-radius:2px;font-family:var(--font-body);font-weight:700;letter-spacing:.06em;box-shadow:inset 0 0 0 1px var(--key),inset 0 0 0 3px color-mix(in srgb,var(--raised) 30%,var(--key));transition:background-color .15s}
.pg-pill-btn:hover{background:color-mix(in srgb,var(--key) 82%,var(--fg))}
@media (max-width:520px){.pg-try-it{padding:1.3rem 1.4rem 1.3rem 3rem}.pg-try-it::before{left:1.9rem}}

/* ---------- footer: the curtain's hem ---------- */
.pg-footer{border-top:0;padding-top:calc(16px + 1.6rem);color:color-mix(in srgb,var(--raised) 84%,var(--fg));background-color:transparent;
  background-image:radial-gradient(circle at 50% 100%,var(--gp-hedge) 12.5px,transparent 13.5px),linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--gp-hedge),var(--gp-hedge));
  background-size:28px 14px,100% 2px,100% calc(100% - 16px);background-position:0 0,0 14px,0 100%;background-repeat:repeat-x,no-repeat,no-repeat}
.pg-footer p{color:color-mix(in srgb,var(--raised) 86%,var(--fg));font-family:var(--font-head);font-style:italic}
.pg-footer nav{gap:.4rem 1.4rem}
.pg-footer a{color:color-mix(in srgb,var(--raised) 90%,var(--fg));font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--raised) 30%,transparent)}
.pg-footer a:hover{color:var(--raised);border-bottom-color:var(--accent)}
.pg-footer a:focus-visible{outline-color:var(--raised)}

@media (max-width:640px){.pg-lede-box{padding:1.5rem 1.05rem 1.3rem;margin-top:1.1rem}.pg-lede-box::before{width:130px}.pg-identity{font-size:1.12rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- refinements ---------- */
.pg-table-holder,.pg-chunk>.pg-grid-table{margin-bottom:1.4em}
.pg-grid-table td,.pg-grid-table th{vertical-align:top;line-height:1.5}
.pg-chunk:has(>.pg-blist)>h2{border-bottom:0;padding-bottom:0}
.pg-post__head{border-bottom:0;margin-bottom:1.2rem;padding-bottom:.4rem}
.pg-post .pg-contents--post ol{columns:1}
@media (min-width:900px){.pg-post .pg-contents--post ol{columns:2;column-gap:2rem}.pg-post .pg-contents--post li a{font-size:.9rem}}
@media (max-width:640px){.pg-grid-table th,.pg-grid-table td{padding:.5rem .45rem;font-size:.88rem;line-height:1.42}.pg-grid-table th{font-size:.68rem;letter-spacing:.07em}.pg-contents~.pg-chunk>h2::before{min-width:1.5em}}
@media (max-width:640px){.pg-grid-table td{hyphens:auto;overflow-wrap:break-word}}