@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,700;0,6..96,900;1,6..96,400;1,6..96,700&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/*
    TEMPLATE89 - "Playbill"

    Ported from the Claude Design project "Actor Template v2"
    (db46008b-6974-45e2-ba82-709ad42143f9, file "Actor Template v2.dc.html"
    plus the "Playbill Body" component it imports).

    A theater program: ink ground, gold rules, Bodoni Moda cut at display
    size over EB Garamond running text, everything centered on the page's
    own axis. It is the deliberate opposite of template68 "Modernist", which
    is flush left on a light ground - the two are meant to sit next to each
    other in the picker and read as different decisions, not different skins.

    Load order matters. template00/_head.php links the cdnjs styles, then
    template00/css/defaults.css (a hard reset: `font: inherit`,
    `body { line-height: 1 }`, list-style stripped), and only then this file.
    So every base rule this design needs is stated rather than assumed.

    css/override.php runs AFTER this file and re-points --color-accent at the
    customer's own primary color. Read its header before changing any accent
    token here: on an ink ground the derived steps run LIGHTER, which is the
    reverse of every light-ground design in this tree.
*/

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /*
        The ground is the program's paper stock, which here is ink. --color-bg
        is the page, --color-surface the frames a photograph or a chapter
        button sits in, --color-surface-2 the idle state of anything pressable.
    */
    --color-bg: #191419;
    --color-surface: #221b23;
    --color-surface-2: #1f1a20;
    --color-surface-3: #2a212b;

    --color-text: #f0e5cf;
    --color-accent: #c19a4b;

    /*
        The accent as a bare triple, so a rule can set its own alpha without
        hard-coding the gold a second time. override.php recomputes it, which
        is what keeps every hairline, dotted divider and glow on the
        customer's own color rather than leaving a gold ghost behind.
    */
    --color-accent-rgb: 193, 154, 75;
    --color-text-rgb: 240, 229, 207;

    /*
        What goes ON the accent when it runs as a fill - the play control, the
        current chapter, a primary button. The design's gold is light enough
        to take the ink, but override.php re-points --color-accent at whatever
        the customer picked and a dark brand color with ink on it is
        unreadable, so this is a token in its own right and override.php
        recomputes it with blackOrWhite().
    */
    --color-on-accent: #191419;

    /*
        Accent ramp. On an ink ground the readable steps are the LIGHT ones:
        -300 and -400 are what running text, links and small meta lines use,
        -600 is the hover fill, -800 the pressed one. A light-ground design in
        this tree has this ramp the other way up.
    */
    --color-accent-300: #e6cd96;
    --color-accent-400: #d7b673;
    --color-accent-500: #c19a4b;
    --color-accent-600: #a8843c;
    --color-accent-800: #7a5f27;

    /* Cream at the four weights the program actually uses. */
    --color-muted: rgba(240, 229, 207, .78);
    --color-muted-2: rgba(240, 229, 207, .55);
    --color-muted-3: rgba(240, 229, 207, .35);

    --color-divider: rgba(var(--color-accent-rgb), .28);
    --color-divider-strong: rgba(var(--color-accent-rgb), .45);

    --font-heading: "Bodoni Moda", "Didot", Georgia, serif;
    --font-heading-weight: 900;
    --font-body: "EB Garamond", Georgia, serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 48px;
    --space-12: 64px;

    /* A program has no rounded corners and no drop shadows on paper. The
       shadows below are for the photographs only, which are physical prints
       laid on the page. */
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;

    --shadow-sm: 0 6px 18px rgba(0, 0, 0, .38);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, .5);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, .6);

    --plb-gutter: 48px;
    --plb-max: 1120px;
    --plb-measure: 640px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.66;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.06;
    letter-spacing: -.012em;
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
h1 { font-size: 58px; }
h2 { font-size: 38px; }
h3 { font-size: 28px; }
h4 { font-size: 21px; }
h5 { font-size: 17px; }
h6 { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; color: var(--color-accent-400); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
strong, b { font-weight: 500; }
em, i { font-style: italic; }

/*
    Links take a LIGHT accent step, not the accent itself. The gold-to-ink
    pair is tuned for rules and display type at ~3:1; running text needs the
    lifted step, and it matters more once override.php swaps in a customer's
    color, which may be far darker than this gold.
*/
a { color: var(--color-accent-300); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-text); text-decoration: underline; }

img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 13px; margin-top: var(--space-1); color: var(--color-muted-2); }
hr { border: 0; height: 1px; background: var(--color-divider); margin: var(--space-6) 0; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 20px; list-style: disc; }
ol { list-style: decimal; }
blockquote {
    margin: 0 0 var(--space-6); padding: 0 0 0 var(--space-6);
    border-left: 1px solid var(--color-divider-strong);
    font-family: var(--font-heading); font-weight: 400; font-style: italic; font-size: 21px;
    line-height: 1.5;
}

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
::selection { background: rgba(var(--color-accent-rgb), .32); color: var(--color-text); }

.text-muted { color: var(--color-muted-2); }

/*
    Photographs run in color.

    Monochrome is a per-account setting the owner controls in the admin
    (settings.setting_grayscale), and getPhotos() / getVideos() /
    getProjects() honor it by inserting Cloudinary's e_grayscale into the
    delivered URL. A CSS filter here would override that choice for everybody,
    could not be turned off, and would double up on anyone who had switched it
    on. template68 shipped with one and it was removed for exactly this
    reason - do not add one back.

    .shot stays as the single hook every content photograph carries, so there
    is one place to change how imagery is treated. It applies no color
    transform of its own.
*/
.shot { background: var(--color-surface); transition: opacity .3s ease; }

/* ==========================================================================
   Motion

   The canvas opens on three staged animations and they are most of what makes
   the design read as a curtain going up, so they are kept rather than
   flattened. Honored only when the visitor has not asked for less.
   ========================================================================== */

@keyframes plbRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes plbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes plbLetters {
    from { opacity: 0; letter-spacing: .34em; transform: translateY(10px); }
    to   { opacity: 1; letter-spacing: -.012em; transform: none; }
}

.plb-rise { animation: plbRise .85s ease both; }
.plb-fade { animation: plbFade 1s ease both; }
.plb-letters { animation: plbLetters 1.1s cubic-bezier(.2, .7, .2, 1) both; }

.plb-d1 { animation-delay: .1s; }
.plb-d2 { animation-delay: .2s; }
.plb-d3 { animation-delay: .32s; }
.plb-d4 { animation-delay: .46s; }
.plb-d5 { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
    .plb-rise, .plb-fade, .plb-letters { animation: none; }
}

/* ==========================================================================
   Components
   ========================================================================== */

.hr { height: 1px; border: 0; margin: var(--space-6) 0; background: var(--color-divider); }

/*
    The ornamental rule: a hairline fading in from nothing on each side of a
    six-petal fleuron. It is the program's own section mark and the one piece
    of decoration in the design, so it is used sparingly - the top of the
    biography and the top of the enquiries block, nowhere else.
*/
.plb-orn {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; margin: 0 0 var(--space-10);
}
.plb-orn::before, .plb-orn::after {
    content: ""; display: block; width: 120px; height: 1px;
    background: linear-gradient(to right, rgba(var(--color-accent-rgb), 0), var(--color-accent));
}
.plb-orn::after { background: linear-gradient(to left, rgba(var(--color-accent-rgb), 0), var(--color-accent)); }
.plb-orn span { font-family: var(--font-heading); color: var(--color-accent); font-size: 15px; line-height: 1; }

/* The uppercase gold line above a display heading. */
.plb-kicker {
    font-size: 11px; letter-spacing: .44em; text-transform: uppercase;
    color: var(--color-accent); margin: 0 0 var(--space-6);
}

/* A section heading. Small, letter-spaced, gold - the program's running head. */
.plb-head {
    margin: 0 0 var(--space-8);
    font-family: var(--font-heading); font-weight: 400;
    font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
    color: var(--color-accent); line-height: 1.5;
}
.plb-head-rule { display: flex; align-items: center; justify-content: center; gap: 18px; }
.plb-head-rule::before, .plb-head-rule::after {
    content: ""; display: block; width: 90px; height: 1px;
    background: linear-gradient(to right, rgba(var(--color-accent-rgb), 0), var(--color-accent));
}
.plb-head-rule::after { background: linear-gradient(to left, rgba(var(--color-accent-rgb), 0), var(--color-accent)); }

/*
    A band head that also carries a link out. Kept on the page axis rather
    than pushed to the edges: this design centers, so a heading with the link
    flung to the right margin reads as a different template.
*/
.plb-bandhead { text-align: center; margin-bottom: var(--space-8); }
.plb-bandhead .plb-head { margin-bottom: var(--space-2); }
.plb-bandhead a {
    font-family: var(--font-heading); font-style: italic; font-size: 15px;
    color: var(--color-accent-300);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none;
    font-family: var(--font-body); font-size: 12px;
    letter-spacing: .26em; text-transform: uppercase; line-height: 1;
    color: var(--color-text); background: transparent;
    border: 1px solid var(--color-divider-strong);
    padding: 15px 26px; border-radius: var(--radius-md);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-800); border-color: var(--color-accent-800); }

.btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-300); }

/* The quiet one: no box at all, just the italic line the program uses for
   "read on". */
.btn-ghost {
    border: 0; padding: 0; letter-spacing: 0; text-transform: none;
    font-family: var(--font-heading); font-style: italic; font-size: 17px;
    color: var(--color-accent-300);
    border-bottom: 1px solid rgba(var(--color-accent-rgb), .5);
    border-radius: 0;
}
.btn-ghost:hover { color: var(--color-text); border-bottom-color: var(--color-text); }

.input {
    width: 100%; min-height: 44px; padding: 10px 14px;
    font-family: var(--font-body); font-size: 16px;
    color: var(--color-text); caret-color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-divider-strong); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 130px; resize: vertical; }

.tag {
    display: inline-flex; align-items: center;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 14px; border-radius: var(--radius-sm);
    border: 1px solid var(--color-divider);
    color: var(--color-muted);
}
.tag-accent { border-color: var(--color-accent); color: var(--color-accent-300); }
.tag-neutral { border-color: var(--color-divider); color: var(--color-muted); }

.table { width: 100%; border-collapse: collapse; font-size: 16px; }
.table th {
    text-align: left; font-family: var(--font-body); font-weight: 400;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--color-muted-2);
    padding: 0 var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-divider-strong);
}
.table td {
    padding: var(--space-4); border-bottom: 1px dotted var(--color-divider-strong);
    vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(var(--color-accent-rgb), .045); }

/* ==========================================================================
   Shell - nav, masthead, footer
   ========================================================================== */

.plb {
    max-width: var(--plb-max); margin: 0 auto;
    background: var(--color-bg); position: relative;
    padding-bottom: var(--space-12);
}

/*
    The house glow. A single soft wash of the accent falling from the top of
    the page, which is what stops the ink reading as a flat black rectangle.
    Pointer-events off so it never eats a click on the nav underneath it.
*/
.plb::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 900px;
    pointer-events: none; z-index: 0;
    background: radial-gradient(120% 80% at 50% 0%, rgba(var(--color-accent-rgb), .10), rgba(0, 0, 0, 0) 60%);
}
.plb > * { position: relative; z-index: 1; }

.plb-nav {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-6); padding: 30px var(--plb-gutter) 26px;
}
.plb-brand {
    font-family: var(--font-heading); font-weight: 700;
    font-size: 19px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--color-text);
    /* A two-word name broke over two lines and took the whole nav bar with
       it. The links wrap instead - there can be a dozen of them and only one
       name. */
    white-space: nowrap;
}
.plb-brand:hover { color: var(--color-accent-300); text-decoration: none; }
.plb-links { display: flex; align-items: baseline; gap: 30px; flex-wrap: wrap; }
.plb-links a {
    font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--color-muted);
}
.plb-links a:hover { color: var(--color-accent-300); text-decoration: none; }
.plb-links a[aria-current="page"] { color: var(--color-accent); }

/* The mobile menu is a checkbox, so the header needs no script of its own. */
.plb-navtoggle { display: none; }
.plb-burger {
    display: none; cursor: pointer; font-size: 20px; line-height: 1;
    padding: 4px 6px; color: var(--color-accent);
}

/*
    The masthead. Every page except home is announced the way a program
    announces an act: the kicker, then the title at display size, centered.
*/
.plb-mast { padding: var(--space-12) var(--plb-gutter) var(--space-10); text-align: center; }
/* Fluid, for the same reason as the hero name: a page can be called
   "Reel" or "Behind the Scenes and Production Stills". */
.plb-mast h1 {
    margin: 0; font-size: clamp(32px, 6.6vw, 76px); line-height: .92;
    font-weight: var(--font-heading-weight); overflow-wrap: anywhere;
}
.plb-mast-meta {
    display: block; margin-top: var(--space-6);
    font-family: var(--font-heading); font-style: italic;
    font-size: 19px; color: var(--color-muted);
}

.plb-foot {
    border-top: 1px solid var(--color-divider);
    margin: var(--space-12) var(--plb-gutter) 0;
    padding-top: var(--space-8); text-align: center;
}
.plb-foot-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-4); margin-bottom: var(--space-6);
}
.plb-foot-links img { width: 24px; height: 24px; }
.plb-foot-copy {
    font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
    color: var(--color-muted-3);
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); justify-content: center;
}

/* Every band shares one gutter and one measure. Nothing is edge to edge
   except the reel and the photographs. */
.plb-band { padding: 0 var(--plb-gutter) var(--space-12); }
.plb-band:last-child { padding-bottom: 0; }
.plb-center { text-align: center; }
.plb-measure { max-width: var(--plb-measure); margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Home - the portrait hero (canvas option 1b)

   The name is cut in two and set around the portrait, which overlaps both
   halves. The photograph is the physical print and the type is the ink
   printed over it, so the headings sit above it in the stack.
   ========================================================================== */

.plb-hero { padding: var(--space-10) var(--plb-gutter) var(--space-12); text-align: center; }
.plb-hero-kicker { margin-bottom: var(--space-6); }

.plb-hero-stack { display: flex; flex-direction: column; align-items: center; }
/*
    Fluid rather than stepped. The canvas sets 132px against one name, and a
    fixed size has to be right for "Avery" and for a fifteen-letter surname at
    the same time - it cannot be. clamp() holds the canvas size at full width,
    scales it down with the viewport, and overflow-wrap catches the rest: a
    name long enough to beat even the floor breaks instead of running off the
    page.
*/
.plb-hero-name {
    position: relative; z-index: 3; margin: 0;
    font-size: clamp(38px, 11.5vw, 132px);
    line-height: .86; letter-spacing: -.02em;
    overflow-wrap: anywhere;
    text-shadow: 0 6px 24px rgba(25, 20, 25, .55);
}
.plb-hero-name.is-last { text-shadow: 0 -6px 24px rgba(25, 20, 25, .55); }

/*
    The negative margins are what make the type overlap the print. They are
    proportional to the portrait rather than fixed, so a shorter name at a
    smaller display size does not leave the photograph floating.
*/
.plb-hero-portrait {
    width: 380px; max-width: 100%; margin: -16px 0 -18px;
    position: relative; z-index: 1;
}
.plb-hero-portrait img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
    box-shadow: var(--shadow-lg);
}
.plb-hero-lede {
    margin: var(--space-8) auto 0; max-width: 46ch;
    font-family: var(--font-heading); font-style: italic; font-size: 20px;
    color: var(--color-muted);
}
.plb-hero-actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-3); margin-top: var(--space-8);
}

/* The name set solid, for an owner with no photograph on file. Without a
   print to overlap, the two halves close up into one block. */
.plb-hero-noimg .plb-hero-name { text-shadow: none; }
.plb-hero-noimg .plb-hero-name.is-last { margin-top: 0; }

/* ==========================================================================
   Vital statistics - four columns divided by dotted gold rules
   ========================================================================== */

/*
    Columns of a fixed width, centered - NOT four 1fr tracks across a fixed
    max-width. An account with only two facts on file stretched two columns
    over 820px and put the dotted rule in the middle of an empty page. This
    way the block is as wide as the facts it has.
*/
.plb-vitals {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 205px);
    justify-content: center; margin: 0 auto; max-width: 100%;
}
.plb-vital {
    text-align: center; padding: 0 var(--space-4);
    border-right: 1px dotted var(--color-divider-strong);
}
.plb-vital:last-child { border-right: 0; }
.plb-vital-k {
    font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--color-muted-2); margin-bottom: var(--space-3);
}
.plb-vital-v { font-family: var(--font-heading); font-size: 21px; line-height: 1.3; }

/* ==========================================================================
   The Company - the billing block

   A playbill bills its cast in descending type size, top billing largest.
   The sizes are computed per account in _plb.php rather than written here,
   because the number of credits varies from one to forty and a fixed ladder
   would either run out or bottom out.
   ========================================================================== */

.plb-billing { max-width: 700px; margin: 0 auto; text-align: center; }
.plb-bill { margin-bottom: var(--space-8); }
.plb-bill:last-child { margin-bottom: 0; }
.plb-bill-role {
    font-family: var(--font-heading); font-style: italic; line-height: 1.05;
    /* --plb-bill-size is set inline per row. */
    font-size: var(--plb-bill-size, 24px);
}
.plb-bill-title {
    margin-top: 7px; letter-spacing: .26em; text-transform: uppercase;
    /* Tracks the role size down, but never below the point where uppercase
       letter-spaced text stops being legible. */
    font-size: max(10.5px, calc(var(--plb-bill-size, 24px) * .38));
}
.plb-bill-meta {
    margin-top: 6px; font-family: var(--font-heading);
    font-size: max(12px, calc(var(--plb-bill-size, 24px) * .4));
    color: var(--color-accent);
}
.plb-bill-title a { color: inherit; }
.plb-bill-title a:hover { color: var(--color-accent-300); text-decoration: none; }

/* ==========================================================================
   Selected projects - the poster row
   ========================================================================== */

.plb-posters {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: var(--space-6) 22px;
}
.plb-poster { width: 164px; }
.plb-poster img {
    width: 164px; height: 246px; object-fit: cover;
    box-shadow: var(--shadow-md);
}
.plb-poster-title {
    margin-top: var(--space-3); text-align: center;
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.plb-poster-meta {
    margin-top: var(--space-1); text-align: center;
    font-family: var(--font-heading); font-style: italic; font-size: 12.5px;
    color: var(--color-accent);
}

/* ==========================================================================
   Biography - the drop cap
   ========================================================================== */

/*
    Left, inside a centered column. Headings and the ornament are centered
    across this design; running prose is not. Set centered it read as a poem,
    and the drop cap - which floats left - sat outside a ragged first line.
*/
.plb-bio {
    max-width: var(--plb-measure); margin: 0 auto;
    font-size: 17.5px; line-height: 1.72; text-align: left;
}
.plb-bio p { margin: 0 0 var(--space-6); }
.plb-bio p:last-child { margin-bottom: 0; }
/*
    The drop cap is set on the first letter of the first paragraph via
    ::first-letter rather than by splitting the string in PHP. The bio is
    HTML the owner wrote in the admin's editor and may open with a tag, an
    entity or a quotation mark, and slicing that by character produced a
    capital in the wrong place often enough to be worth avoiding.
*/
.plb-bio > p:first-child::first-letter {
    font-family: var(--font-heading); font-size: 58px; line-height: .82;
    float: left; padding: 4px 10px 0 0; color: var(--color-accent);
}
.plb-bio a { border-bottom: 1px solid rgba(var(--color-accent-rgb), .4); }

/* ==========================================================================
   The reel - canvas option 1c

   Poster frame, a ringed play control on the center axis, the current
   chapter's title and time across the foot, then the chapter row underneath
   as equal cells.
   ========================================================================== */

.plb-reel { position: relative; background: var(--color-surface); box-shadow: var(--shadow-lg); }
.plb-reel-poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.plb-reel-overlay { position: absolute; inset: 0; }

.plb-reel-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 96px; height: 96px; border-radius: 50%;
    border: 1px solid rgba(var(--color-text-rgb), .7);
    background: rgba(25, 20, 25, .42);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background .25s ease, border-color .25s ease;
}
.plb-reel-play:hover { background: rgba(25, 20, 25, .72); border-color: var(--color-accent); }
/* The glyph is a CSS triangle, as in the canvas - a text arrow renders at a
   different weight in every font stack and would not sit on the ring's axis. */
.plb-reel-play::before {
    content: ""; display: block; width: 0; height: 0; margin-left: 6px;
    border-left: 26px solid var(--color-text);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}
.plb-reel-play:hover::before { border-left-color: var(--color-accent); }

.plb-reel-foot {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3);
    padding: 20px 24px; pointer-events: none;
    background: linear-gradient(to top, rgba(25, 20, 25, .85), rgba(25, 20, 25, 0));
}
.plb-reel-title { font-family: var(--font-heading); font-style: italic; font-size: 26px; color: var(--color-text); }
.plb-reel-meta { font-family: var(--font-heading); font-size: 14px; color: var(--color-accent); }
.plb-reel-frame { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

.plb-chapters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
.plb-chapter {
    appearance: none; cursor: pointer; text-align: left;
    padding: 16px 18px; background: var(--color-surface-2);
    border: 0; border-top: 2px solid rgba(var(--color-accent-rgb), .25);
    color: var(--color-text); font-family: var(--font-body);
    transition: background .25s ease, border-color .25s ease;
}
.plb-chapter:hover { background: var(--color-surface-3); }
.plb-chapter.is-current { background: var(--color-surface-3); border-top-color: var(--color-accent); }
.plb-chapter-numeral {
    font-family: var(--font-heading); font-size: 11px; letter-spacing: .2em;
    color: var(--color-accent);
}
.plb-chapter-title {
    display: block; font-family: var(--font-heading); font-style: italic;
    font-size: 21px; margin-top: 6px; line-height: 1.15;
}
.plb-chapter-meta {
    display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--color-muted-2); margin-top: 6px;
}

/*
    The chapter list as a printed contents page, with dotted leaders. Used on
    the pages that do not carry the player - it is the same four chapters,
    read rather than clicked.
*/
.plb-contents { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.plb-contents-row { display: flex; align-items: baseline; gap: var(--space-4); }
.plb-contents-numeral { font-family: var(--font-heading); font-size: 12px; color: var(--color-accent); width: 26px; flex: none; }
.plb-contents-title { font-family: var(--font-heading); font-style: italic; font-size: 22px; }
.plb-contents-leader { flex: 1; border-bottom: 1px dotted var(--color-divider-strong); }
.plb-contents-meta { font-family: var(--font-heading); font-size: 14px; color: var(--color-accent); }

/* ==========================================================================
   Gallery - the five-square headshot cluster (canvas option 1a)

   A 4-column grid where the first frame takes a 2x2 block and the next four
   take one cell each. Written so it degrades honestly: with fewer than five
   photographs the missing cells are simply not there, and with one the lead
   frame gives up its span rather than leaving three empty columns.
   ========================================================================== */

.plb-cluster { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 154px; gap: var(--space-3); }
.plb-cell { position: relative; cursor: pointer; background: var(--color-surface); min-width: 0; }
.plb-cell img { width: 100%; height: 100%; object-fit: cover; }
.plb-cell-lead { grid-column: span 2; grid-row: span 2; box-shadow: var(--shadow-md); }
.plb-cluster-solo { grid-template-columns: 1fr; grid-auto-rows: auto; }
.plb-cluster-solo .plb-cell-lead { grid-column: auto; grid-row: auto; }
.plb-cluster-solo .plb-cell img { aspect-ratio: 3/2; height: auto; }

.plb-cell-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 12px; background: linear-gradient(to top, rgba(25, 20, 25, .88), rgba(25, 20, 25, 0));
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text);
}

.plb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.plb-grid-item { position: relative; cursor: pointer; }
.plb-grid-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.plb-grid-item .plb-grid-label {
    margin-top: var(--space-2); font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--color-muted-2);
    display: flex; align-items: baseline; gap: 6px;
}
.plb-grid-item[data-type="video"] .plb-grid-label::before { content: "\25B6"; color: var(--color-accent); font-size: 9px; }

/*
    An audio row has no picture to open, so gallery.php gives it the jPlayer
    skeleton instead of a lightbox link: cover art, the track name, and a
    transport bar sitting over the artwork. The control glyphs are drawn here
    as CSS triangles and bars rather than icon-font characters, because the
    icon fonts these designs used to carry are gone platform-wide and a
    play button that renders as a missing-glyph box is worse than no button.

    jPlayer toggles the inline display of .jp-play / .jp-pause itself, so
    neither gets a display rule here beyond the flex centering.
*/
.plb-audio-cell { cursor: pointer; background: var(--color-surface); }
.plb-audio-cell .shot { opacity: .55; transition: opacity var(--transition, .2s) ease; }
.plb-audio-cell:hover .shot, .plb-audio-cell.playing .shot { opacity: .8; }
.plb-audio-cell .sound-title {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 10px 12px; margin: 0;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--color-text);
    background: linear-gradient(to bottom, rgba(25, 20, 25, .88), rgba(25, 20, 25, 0));
}
.plb-audio-cell .sound-controls {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(25, 20, 25, .92), rgba(25, 20, 25, 0));
}
.plb-audio-cell .jp-interface { display: flex; align-items: center; gap: 10px; }
.plb-audio-cell .jp-controls { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.plb-audio-cell .jp-controls a {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-accent); color: var(--color-on-accent, #191419);
}
.plb-audio-cell .jp-play::before {
    content: ""; margin-left: 2px;
    border-left: 9px solid currentColor;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.plb-audio-cell .jp-pause::before {
    content: ""; width: 9px; height: 11px;
    border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.plb-audio-cell .jp-progress { flex: 1; height: 3px; background: rgba(var(--color-text-rgb), .28); }
.plb-audio-cell .jp-seek-bar { height: 100%; background: rgba(var(--color-text-rgb), .18); }
.plb-audio-cell .jp-play-bar { height: 100%; background: var(--color-accent); }
.plb-audio-cell .jp-jplayer { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Press
   ========================================================================== */

.plb-press { display: grid; gap: var(--space-10); max-width: 860px; margin: 0 auto; }
.plb-press-item {
    display: grid; grid-template-columns: 160px 1fr; gap: var(--space-8);
    padding-bottom: var(--space-10); border-bottom: 1px dotted var(--color-divider-strong);
    text-align: left;
}
.plb-press-item:last-child { border-bottom: 0; padding-bottom: 0; }
.plb-press-item.is-textonly { grid-template-columns: 1fr; }
.plb-press-item img { width: 100%; object-fit: cover; box-shadow: var(--shadow-sm); }
.plb-press-meta {
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--color-muted-2); margin-bottom: var(--space-2);
}
.plb-press-item h3 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; margin: 0 0 var(--space-3); }
.plb-press-item h3 a { color: inherit; }
.plb-press-item h3 a:hover { color: var(--color-accent-300); text-decoration: none; }

/* ==========================================================================
   Enquiries - the closing block
   ========================================================================== */

.plb-enquiries { text-align: center; }
/*
    An email address cannot be hyphenated and some of them are long -
    "thejordancharlescompany@gmail.com" is 33 characters and a real one. So
    the size is capped against the viewport rather than fixed at the canvas's
    34px, and it is allowed to break rather than run off the page.
*/
.plb-enquiries-email {
    display: inline-block; max-width: 100%;
    font-family: var(--font-heading); font-style: italic;
    font-size: clamp(19px, 5vw, 34px); line-height: 1.25;
    overflow-wrap: anywhere;
    color: var(--color-text);
    border-bottom: 1px solid rgba(var(--color-accent-rgb), .5);
}
.plb-enquiries-email:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); text-decoration: none; }
.plb-enquiries-cols {
    margin: var(--space-10) auto 0;
    display: flex; justify-content: center; gap: var(--space-12); flex-wrap: wrap;
    text-align: center;
}
.plb-enquiries-k {
    font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--color-muted-2); margin-bottom: var(--space-3);
}
.plb-enquiries-v { font-family: var(--font-heading); font-size: 17px; line-height: 1.6; }

.plb-skills { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* Link and download cards, on More. */
.plb-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.plb-linkcard {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-divider); text-align: left;
}
.plb-linkcard:hover { border-color: var(--color-accent); color: var(--color-text); text-decoration: none; }
.plb-linkcard-name { font-family: var(--font-heading); font-style: italic; font-size: 19px; line-height: 1.2; }
.plb-linkcard-meta { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--color-muted-2); }

.plb-year { font-family: var(--font-heading); font-variant-numeric: tabular-nums; color: var(--color-accent); white-space: nowrap; }
.plb-title-cell { font-family: var(--font-heading); font-style: italic; font-size: 20px; }
.plb-sub { font-size: 13px; color: var(--color-muted-2); margin-top: var(--space-1); }

/* template00/_footer.php draws the contact map into #map. */
#map { width: 100%; height: 420px; background: var(--color-surface); }

/*
    A page with nothing on it. Reachable by URL even when it is not in the
    menu (the menu hides pages with no rows), and a masthead over a blank page
    reads as broken rather than as empty.
*/
.plb-empty { text-align: center; color: var(--color-muted-2); }
.plb-empty-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-3) var(--space-8); margin-top: var(--space-6);
    font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
}

/* ==========================================================================
   template00 fallbacks and the shared inner-page rhythm

   Six pages exist on essentially every account: profile, contact, portfolio,
   experience, more and training. This design carries its own copy of all six.
   Everything else - audio, events, soundcloud, presskit, instagram, mailchimp,
   custom, sitemap, blog, wfa - resolves to template00's copy through
   get_include_page(), and those are written against .section / .value-name /
   .value / .name plus a few Bootstrap-era names.

   index.php wraps any page whose output carries no .plb-* block in
   .plb-band.plb-fallback, which is what gives it the page gutter. Everything
   below dresses that markup in the program's own terms so an un-ported page
   reads as part of the design rather than as raw reset output.
   ========================================================================== */

.plb-fallback { max-width: 860px; margin: 0 auto; text-align: left; }
.plb-fallback > .section + .section,
.plb-fallback > div + div:not(.clr) {
    margin-top: var(--space-10); padding-top: var(--space-10);
    border-top: 1px dotted var(--color-divider-strong);
}
.plb-fallback > .section > h2:first-child,
.plb-fallback > div > h2:first-child {
    margin: 0 0 var(--space-6);
    font-family: var(--font-heading); font-weight: 400;
    font-size: 13px; letter-spacing: .42em; text-transform: uppercase;
    color: var(--color-accent);
}
.plb-main .section { margin-bottom: 0; }
.plb-main .clr { clear: both; }

/*
    .value-name is template00's universal row: a .value (the thing) and a
    .name (what it is). Set as a ruled entry rather than two spans running
    together, which is how it reads unstyled.
*/
.plb-main .value-name { padding: var(--space-4) 0; border-bottom: 1px dotted var(--color-divider); }
.plb-main .value-name:last-child { border-bottom: 0; }
.plb-main .value-name .value,
.plb-main .value-name > .value { font-family: var(--font-heading); font-style: italic; font-size: 21px; line-height: 1.25; }
.plb-main .value-name .name { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted-2); margin-top: var(--space-1); }
.plb-main .value-name .name .date { font-variant-numeric: tabular-nums; }
.plb-main .value-name .body { margin-top: var(--space-3); font-size: 16px; }

.plb-main .press-item h3.value { font-size: 24px; margin: 0; }
.plb-main .press-item .medium { text-transform: uppercase; letter-spacing: .22em; font-size: 11px; }
.plb-main .press-item .author, .plb-main .press-item .date { font-size: 12px; color: var(--color-muted-2); }
.plb-main .press-item img { width: 160px; height: auto; float: left; margin: 0 var(--space-6) var(--space-3) 0; }

.plb-main .link.value-name .value { font-size: 19px; }
.plb-main .review .value { font-family: var(--font-heading); font-style: italic; font-size: 19px; }
.plb-main .sitemap-list { list-style: none; margin: 0; padding: 0; }
.plb-main .sitemap-list .value { display: inline-block; }

.plb-main .tags {
    display: inline-flex; align-items: center;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 14px; margin: 0 var(--space-1) var(--space-1) 0;
    border: 1px solid var(--color-divider); color: var(--color-muted);
}
.plb-main .img-responsive, .plb-main .img-thumbnail { max-width: 100%; height: auto; }
.plb-main .embed-responsive { position: relative; width: 100%; padding-top: 56.25%; }
.plb-main .embed-responsive iframe,
.plb-main .embed-responsive .embed-responsive-item { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plb-main .videos-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-8); }
.plb-main .credit-separator { height: 1px; background: var(--color-divider); margin: var(--space-6) 0; }
.plb-main #features .section { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-6); }

/*
    Bootstrap grid classes, which presskit.php and template00/gallery.php
    emit. Bootstrap is not loaded for this design, so without this they stack
    at full width with no gutter.
*/
.plb-fallback .row,
.plb-main .template00-gallery .row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-4);
}
.plb-fallback [class*="col-"],
.plb-main .template00-gallery [class*="col-"] { width: auto; max-width: none; padding: 0; float: none; }
.plb-fallback .container, .plb-fallback .container-fluid { width: auto; max-width: none; padding: 0; margin: 0; }

/*
    Four template00 partials open with an inline <style> that paints their own
    page a light ground - custom.php and blog.php and mailchimp.php set
    #fff on #page-custom / #page-blog / #page-mailchimp, and presskit.php sets
    #f5f5f5 on its biography blockquote. Every other design in this tree is on
    paper so nobody noticed. Here the design's cream text landed on white at a
    contrast ratio of 1.15:1, which is invisible.

    Those blocks are inline in the body, so they come after this stylesheet and
    win on document order at equal specificity. Prefixing with .plb-fallback
    adds a class to an id selector, which outranks them without needing
    !important and without touching a shared file that renders on 90+ designs.
*/
.plb-fallback #page-custom,
.plb-fallback #page-blog,
.plb-fallback #page-mailchimp,
.plb-fallback #page-presskit,
.plb-fallback #page-outer,
.plb-fallback #page-inner { background: transparent; color: var(--color-text); }

.plb-fallback #page-presskit blockquote {
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    color: var(--color-text);
}

/*
    template00/blog.php hides the thumbnail inside a post body. Keep that, but
    the list thumbnails above it are the whole point of the page.
*/
.plb-fallback #page-blog .img-thumbnail { background: var(--color-surface); border: 1px solid var(--color-divider); padding: 4px; }

.plb-main #filter {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-8);
}
.plb-main #filter a { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--color-muted-2); }
.plb-main #filter a.current, .plb-main #filter a:hover { color: var(--color-accent); }

/* ==========================================================================
   template00/sub_contact.php - the shared contact form

   Its markup is fixed: a #contact-form-left holding three
   .contact-field-holder divs and a #contact-form-right holding the textarea
   and the submit. Nothing in it carries spacing of its own, so the fields sit
   edge to edge unless a design says otherwise.

   display:contents on the two wrappers makes their fields items of the form's
   own grid, which is how name and email end up on one row out of markup that
   is fixed and shared with every other template. Where it is not supported
   the fields simply stack, which is still fine. The subject holder is
   addressed by :nth-of-type because the wrapper's only other children are
   hidden inputs, which generate no box.
   ========================================================================== */

.plb-form { max-width: 620px; margin: 0 auto; text-align: left; }
.plb-main #contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.plb-main #contact-form-left,
.plb-main #contact-form-right { display: contents; }
.plb-main #contact .contact-field-holder { margin: 0; }
.plb-main #contact .contact-field-holder:nth-of-type(3) { grid-column: 1 / -1; }
.plb-main #contact textarea,
.plb-main #contact input[type="submit"] { grid-column: 1 / -1; }
.plb-main #contact input[type="text"], .plb-main #contact textarea {
    width: 100%; min-height: 44px; padding: 10px 14px; display: block;
    font-family: var(--font-body); font-size: 16px; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0;
}
.plb-main #contact input[type="text"]::placeholder,
.plb-main #contact textarea::placeholder { color: var(--color-muted-3); }
.plb-main #contact input[type="text"]:focus-visible,
.plb-main #contact textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.plb-main #contact textarea { min-height: 150px; resize: vertical; }
.plb-main #contact input[type="submit"] {
    font-family: var(--font-body); font-size: 12px;
    letter-spacing: .26em; text-transform: uppercase;
    background: var(--color-accent); color: var(--color-on-accent);
    border: 0; cursor: pointer; padding: 16px 26px; width: 100%;
}
.plb-main #contact input[type="submit"]:hover { background: var(--color-accent-600); }
.plb-main #contact label {
    display: block; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
    margin-bottom: var(--space-2); color: var(--color-muted-2);
}
.plb-main .status-success, .plb-main .status-error {
    font-size: 15px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    border: 1px solid var(--color-divider);
}
.plb-main .status-success { border-color: var(--color-accent); color: var(--color-accent-300); }
.plb-main .status-error { color: var(--color-text); }

/* ==========================================================================
   Responsive - the program narrows, the ornament stays
   ========================================================================== */

@media (max-width: 1000px) {
    .plb-chapters { grid-template-columns: repeat(2, 1fr); }
    /* Two rows of two. Still fixed-width tracks, not 1fr - the point of the
       base rule is that the block never stretches wider than its facts. */
    .plb-vitals { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(150px, 205px)); gap: var(--space-8) 0; }
    .plb-vital:nth-child(2n) { border-right: 0; }
}

@media (max-width: 760px) {
    :root { --plb-gutter: 22px; }

    body { font-size: 16px; }

    .plb-burger { display: block; }
    .plb-nav { flex-wrap: wrap; align-items: center; }
    .plb-links {
        display: none; width: 100%; flex-direction: column; align-items: center;
        gap: var(--space-4); padding-top: var(--space-6);
    }
    .plb-navtoggle:checked ~ .plb-links { display: flex; }

    .plb-hero-portrait { width: 260px; margin: -8px 0 -10px; }
    .plb-hero-lede { font-size: 17px; }
    .plb-mast { padding-top: var(--space-10); }
    .plb-mast-meta { font-size: 16px; }

    .plb-orn::before, .plb-orn::after { width: 60px; }
    .plb-head-rule::before, .plb-head-rule::after { width: 44px; }
    .plb-head { letter-spacing: .3em; }

    .plb-cluster { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
    .plb-chapters { grid-template-columns: 1fr; }
    .plb-press-item { grid-template-columns: 1fr; gap: var(--space-4); }
    .plb-press-item img { max-width: 220px; }
    .plb-reel-play { width: 66px; height: 66px; }
    .plb-reel-play::before { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
    .plb-reel-title { font-size: 20px; }
    .plb-enquiries-cols { gap: var(--space-8); }
    .plb-main #contact { grid-template-columns: 1fr; }

    /* The credits table stops being a table. Four columns of playbill type
       at 360px is a column of single words. */
    .plb-table-stack thead { display: none; }
    .plb-table-stack, .plb-table-stack tbody, .plb-table-stack tr, .plb-table-stack td { display: block; width: 100%; }
    .plb-table-stack tr { padding: var(--space-4) 0; border-bottom: 1px dotted var(--color-divider-strong); }
    .plb-table-stack tr:last-child { border-bottom: 0; }
    .plb-table-stack td { border-bottom: 0; padding: 0 0 var(--space-1); }
    .plb-table-stack td:empty { display: none; }
}

@media (max-width: 460px) {
    .plb-hero-portrait { width: 200px; }
    .plb-vitals { grid-template-columns: minmax(150px, 260px); }
    .plb-vital { border-right: 0; }
    .plb-cluster { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .plb-cluster .plb-cell-lead { grid-column: auto; grid-row: auto; }
    .plb-cluster .plb-cell img { aspect-ratio: 1; height: auto; }
}

@media print {
    .plb-nav, .plb-foot, .plb-reel, .plb-chapters, .plb-hero-actions { display: none; }
    body { background: #fff; color: #000; }
}