/* ═══════════════════════════════════════════════════════════════════════
   Crew profile — dark theme
   rev 2026-08-08

   INSTALL  themes/write-direct-studio/assets/css/profile-dark.css
            enqueued AFTER style.css, on is_singular('crew')

   ── THE RULE THIS FILE OBEYS ────────────────────────────────────────────

   style.css is shared by crew AND actor profiles. Both use .pf-block,
   .pf-container, .pf-top, .pf-row, .day-rates, .pf-yellow and the rest.

   So this file NEVER changes layout on a shared class. On anything that
   already exists in style.css it sets colour and nothing else — no width,
   padding, margin, display, flex, font-size or position.

   That is not a style preference, it is the fix for what broke last time.
   The previous attempt reconstructed .pf-container as a 1400px grid when
   style.css defines it as a 1122px flex row, and rewrote the padding and
   column split from guesses. Colour cannot move an element; layout can,
   and did.

   Layout appears here only on class names that appear NOWHERE in
   style.css — wds-hero-*, wds-fave-*, is-slim. Those cannot reach the
   actor template because the actor template does not contain them.

   ── SWITCHING ACTORS OVER LATER ─────────────────────────────────────────

   Everything hangs off .wd-dark, which single-crew.php puts on the
   .profile wrapper. To give actors the same treatment, add wd-dark to
   their wrapper and enqueue this file there too. Nothing else changes.
   Until you do, actor profiles are bit-for-bit untouched.

   ── VERIFYING THAT CLAIM ────────────────────────────────────────────────

   The build script checks it rather than asserting it: it reads the class
   inventory out of style.css and fails if any shared class receives a
   non-colour property. If you edit this file, re-run it.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Palette ────────────────────────────────────────────────────────────
   The surface ladder, darkest first. This is the ordering the mid-brown
   canvas got wrong: the page must be the darkest layer and everything
   resting on it steps LIGHTER. A card darker than its page reads as a hole
   punched through the page rather than an object sitting on it.

   All values are warm — there is brown in the neutral, so the page keeps
   the warmth the tan gave the brand. A cold #1a1a1a would have thrown it
   away.

   --wd-gold is your existing #ECB612, unchanged, so the accent still
   matches the rest of the site. */

.wd-dark {
    /* rev 2 — "too dark" was a SEPARATION problem, not a brightness one.
       The first pass put the card barely above the canvas, so every panel
       dissolved into the page and the whole thing read as one slab.

       The fix is the step between layers, not the overall level. The canvas
       actually went slightly DARKER here and the page still reads lighter,
       because the cards now lift clearly off it.

       Measured as a luminance ratio, canvas -> card is 1.36x. Letterboxd
       is 1.42x, Mubi 1.23x, GitHub dark 1.09x — GitHub being the one that
       gets called flat. The verify script enforces 1.35x as the floor so
       this cannot quietly regress. */
    --wd-canvas:  #131109;
    --wd-card:    #312c23;
    --wd-raised:  #3e392f;
    --wd-line:    #4c4638;
    --wd-line-lo: #3f3a30;

    /* Lifting the surfaces meant lifting the text with them — the muted
       tones were tuned against a near-black card and dropped below AA once
       the card came up. Raising surfaces without raising text is the usual
       way a dark theme quietly loses its secondary copy. */
    --wd-head:    #f7f4ec;
    --wd-text:    #e0dbd0;
    --wd-dim:     #b8b0a0;
    --wd-faint:   #9d9484;

    --wd-gold:    #ECB612;
    --wd-gold-lo: #c9a83a;
    --wd-gold-ink:#2e2300;

    /* Lighter than --wd-gold on purpose. The active ring has to read
       against the muted secondary chips AND against the solid gold primary
       chip; a ring the same gold as the fill would vanish on the one chip
       that is selected by default. */
    --wd-gold-ring: #f7dc7a;
}


/* ═══════════════════════════════════════════════════════════════════════
   CANVAS AND CARDS
   ═══════════════════════════════════════════════════════════════════════ */

.wd-dark {
    background: var(--wd-canvas);
    color: var(--wd-text);
}

/* .profile only covers its own box. Without this the page ends in a band
   of whatever the theme body colour is, below the profile. */
body.single-crew {
    background: #131109;
}


/* ── Header and footer edges ────────────────────────────────────────────

   .header-bar is #0f0f0f and .footer-bottom is #0f0f0f, against a #131109
   canvas. Three near-blacks within a couple of points of each other, so
   the page reads as having no top or bottom edge at all.

   BOX-SHADOW, NOT BORDER. A border would add a real 1px to the layout and
   nudge the whole page down by one; box-shadow paints an identical line
   and occupies no space. It also keeps this a pure colour change, so it
   cannot move anything even by accident.

   Scoped to body.single-crew because both elements are site-wide chrome.
   On the light pages a black bar against tan already separates itself and
   needs nothing — and .top-dark, despite the name, is not defined in
   style.css at all, so there is no dark-page hook to use instead.

   The header is position:relative, not sticky, so this is cosmetic. If you
   ever make it sticky the edge stops being optional, because content
   sliding under an undefined boundary is what actually reads as broken. */

body.single-crew .header-bar {
    box-shadow: 0 1px 0 #2b2620;
}

/* NOTE: style.css also defines .footer-header as a gold (#ECB612) CTA
   band that sits directly above .footer-bottom. If that band renders on
   profile pages, the footer already has a hard edge and this rule is doing
   nothing useful — delete it. It is here because the canvas and
   .footer-bottom are near-identical when the gold band is absent. */
body.single-crew .footer-bottom {
    box-shadow: 0 -1px 0 #2b2620;
}

.wd-dark .pf-block { background: var(--wd-card); }

/* .pf-radius carries `border: 1px solid #d9d9da` in style.css. A light
   hairline on a dark card outlines every panel in near-white, which was a
   large part of what looked wrong before. Colour only — the 1px and the
   solid are left exactly as they are. */
.wd-dark .pf-radius { border-color: var(--wd-line); }

/* Scoped to .wd-dark rather than to .pf-block, because several blocks on
   this page are NOT inside a .pf-block — the endorsements shortcodes print
   their own heading straight into .pf-left. Scoping to the card meant those
   headings kept their dark colour and vanished against the dark page.
   .wd-dark only exists on the profile wrapper, so this cannot leak out. */
.wd-dark h2 { color: var(--wd-head); }
.wd-dark h3 { color: var(--wd-dim); }

.wd-dark .pf-block p { color: var(--wd-text); }

/* .pf-unique ships background #faf8f2 with #2c2c2c text. Recolouring only
   the text left light-on-cream — unreadable, and the single worst thing on
   the page. The gold border-left and the quote glyph stay; they read even
   better against a dark panel than they did against the cream. */
.wd-dark .pf-unique {
    background: var(--wd-raised);
    color: var(--wd-text);
}

.wd-dark a { color: var(--wd-gold-lo); }
.wd-dark a:hover { color: var(--wd-gold); }


/* ═══════════════════════════════════════════════════════════════════════
   RATE TABLE
   ═══════════════════════════════════════════════════════════════════════

   .pf-top, .pf-row, .pf-row-gray and .pf-bottom each carry their own
   border-left and border-right in #d9d9da, plus a top or bottom border on
   the caps. Every one of those needs recolouring or the table is drawn as
   a light box around dark rows. Colour only — the widths stay. */

.wd-dark .pf-top,
.wd-dark .pf-row,
.wd-dark .pf-bottom { background: var(--wd-card); }

.wd-dark .pf-row-gray { background: var(--wd-raised); }

.wd-dark .pf-top,
.wd-dark .pf-row,
.wd-dark .pf-row-gray,
.wd-dark .pf-bottom { border-color: var(--wd-line); }

.wd-dark .pf-top { color: var(--wd-dim); }

.wd-dark .rate-skill  { color: var(--wd-text); }
.wd-dark .rate-amount { color: var(--wd-dim); }


/* The .is-slim two-column variant was removed along with the slimmed rate
   table. The Shorts and Features columns are back per skill, so .day-rates
   is once again the four-column layout style.css already sizes — no
   override needed here at all, which is the better outcome: one fewer
   place where this file and style.css can disagree. */


/* ═══════════════════════════════════════════════════════════════════════
   THE GOLD BLOCK
   ═══════════════════════════════════════════════════════════════════════

   style.css fills .pf-yellow solid #ECB612 with a dark border. Against tan
   that read fine. Against a dark page it became the most saturated thing
   on screen and out-competed the name, the reel and the work — everything
   the page actually exists to show.

   Inverted: dark card, gold number. Same information, same accent colour,
   stops shouting. Colour only, so the padding and width are untouched. */

.wd-dark .pf-yellow {
    background: var(--wd-card);
    border-color: var(--wd-gold-lo);
    color: var(--wd-text);
}

.wd-dark .pf-yellow h3 { color: var(--wd-gold-lo); }

/* #6b5710 in style.css — a deep gold-brown chosen to read ON gold. On a
   dark card it is nearly invisible. */
.wd-dark .pf-stat-label { color: var(--wd-faint); }

.wd-dark .pf-stat-value { color: var(--wd-gold); }
.wd-dark .pf-stat-unit  { color: var(--wd-gold-lo); }

.wd-dark .pf-stat + .pf-stat { border-top-color: var(--wd-line); }


/* ── Union chips ────────────────────────────────────────────────────────
   New names, so layout is fine here.

   Chips rather than a comma list because the count varies: one union is a
   line, three is a paragraph, and a paragraph in a rail card sized for a
   four-digit year looks like something overflowed. Chips wrap cleanly at
   any count and stay legible at the narrow rail width. */

.wds-union-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.wds-union {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.35;
    background: #3d3216;
    color: var(--wd-gold);
}


/* ═══════════════════════════════════════════════════════════════════════
   BIO · CREDITS · ACCOLADES
   ═══════════════════════════════════════════════════════════════════════ */

.wd-dark .pf-bio-short,
.wd-dark .pf-bio-full { color: var(--wd-text); }

.wd-dark .pf-bio-more,
.wd-dark .pf-bio-less { color: var(--wd-gold-lo); }

.wd-dark .pf-credits { border-color: var(--wd-line); }

.wd-dark .pf-credits-details h3 { color: var(--wd-head); }
.wd-dark .pf-credits-stats,
.wd-dark .pf-credit { color: var(--wd-faint); }
.wd-dark .pf-credits-row { color: var(--wd-dim); }
.wd-dark .pf-credits-description { color: var(--wd-text); }

/* #f2f0ed in style.css */
.wd-dark .cast-credit {
    background: var(--wd-raised);
    border-color: var(--wd-line-lo);
    color: var(--wd-text);
}

.wd-dark .cast-credit strong { color: var(--wd-head); }
.wd-dark .pf-dot-separator { color: var(--wd-faint); }

/* The light plate (#f0efe9) is on the INNER element, not on
   .pf-credits-poster itself — style.css puts it on `.pf-credits-poster > a`
   and `.pf-poster-frame`, which is also where the border-radius and
   overflow:hidden live. Painting the outer flex container instead would
   have drawn a square behind the rounded frame and left the actual plate
   light. */
.wd-dark .pf-credits-poster > a,
.wd-dark .pf-credits-poster .pf-poster-frame { background: var(--wd-raised); }

.wd-dark .pf-accolade-card {
    background: var(--wd-raised);
    border-color: var(--wd-line);
}

.wd-dark .pf-accolade-headline { color: var(--wd-head); }
.wd-dark .pf-accolade-project  { color: var(--wd-dim); }

/* Both carry their own light fills — #fff and #f6edcf — not just text. */
.wd-dark .pf-accolade-source {
    background: var(--wd-line);
    color: var(--wd-dim);
}

.wd-dark .pf-accolade-type {
    background: var(--wd-line);
    color: var(--wd-gold-lo);
}


/* ═══════════════════════════════════════════════════════════════════════
   SCRIPTS GRID
   ═══════════════════════════════════════════════════════════════════════

   The title-page SVG in the template is drawn in near-whites, which is
   already right on a dark card — it reads as paper. Nothing to restyle
   there, only the card around it. */

.wd-dark .wds-script-card {
    background: var(--wd-raised);
    border-color: var(--wd-line);
}

.wd-dark .wds-script-card:hover { border-color: var(--wd-gold-lo); }

.wd-dark .wds-script-name    { color: var(--wd-head); }
.wd-dark .wds-script-logline { color: var(--wd-dim); }
.wd-dark .wds-script-meta,
.wd-dark .wds-script-note-label { color: var(--wd-faint); }
.wd-dark .wds-script-cta     { color: var(--wd-gold-lo); }

.wd-dark .wds-script-count,
.wd-dark .wds-script-format {
    background: var(--wd-line);
    color: var(--wd-dim);
}


/* ═══════════════════════════════════════════════════════════════════════
   GEAR GRID
   ═══════════════════════════════════════════════════════════════════════

   Same treatment as the scripts grid above, and for the same reason: the
   light card was the only white rectangle on the page, so it read as a
   pasted-in widget rather than part of the profile. The photo keeps its own
   brightness — muting that would defeat the point of showing the gear — so
   only the frame around it changes.

   The availability pill sits ON the photo, so it goes dark rather than light:
   a white pill on an already-bright product shot disappears. */

.wd-dark .wds-gear-card {
    background: var(--wd-raised);
    border-color: var(--wd-line);
}

.wd-dark .wds-gear-card:hover {
    border-color: var(--wd-gold-lo);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.wd-dark .wds-gear-card-thumb { background: var(--wd-line-lo); }
.wd-dark .wds-gear-card-noimg { color: var(--wd-faint); }

.wd-dark .wds-gear-card-name  { color: var(--wd-head); }
.wd-dark .wds-gear-card-cat   { color: var(--wd-faint); }
.wd-dark .wds-gear-card-price { color: var(--wd-gold-lo); }
.wd-dark .wds-gear-card-owner { color: var(--wd-faint); }

.wd-dark .wds-gear-card-state {
    background: rgba(19, 17, 9, .82);
    backdrop-filter: blur(2px);
}
.wd-dark .wds-gear-card-state.is-available { color: #7fd18f; }
.wd-dark .wds-gear-card-state.is-out       { color: #f0928f; }

.wd-dark .wds-gear-card-free {
    background: var(--wd-line);
    color: var(--wd-gold-lo);
}

.wd-dark .wds-gear-count {
    background: var(--wd-line);
    color: var(--wd-dim);
}
.wd-dark .wds-gear-intro { color: var(--wd-dim); }

/* ═══════════════════════════════════════════════════════════════════════
   ENDORSEMENTS
   ═══════════════════════════════════════════════════════════════════════

   These class names were read out of style.css, not guessed. If a block
   still looks light after install it is because it uses a name not in
   this list — send me the rendered HTML and it goes in. */

/* .wds-endorsements is a LAYOUT WRAPPER — `margin: 30px 0` and nothing
   else. No padding, no border-radius. Giving it a background painted a
   square block behind the rounded .wds-endorse-box inside it, which is why
   the corners looked wrong. It stays transparent; the box is the panel. */
.wd-dark .wds-endorsements { color: var(--wd-text); }

.wd-dark .wds-endorse-box,
.wd-dark .wds-endorse-item,
.wd-dark .wds-endorse-manage-item {
    background: var(--wd-raised);
    border-color: var(--wd-line);
    color: var(--wd-text);
}

.wd-dark .wds-endorse-head,
.wd-dark .wds-endorse-manage-head,
.wd-dark .wds-endorse-name { color: var(--wd-head); }

.wd-dark .wds-endorse-by,
.wd-dark .wds-endorse-on,
.wd-dark .wds-endorse-hint,
.wd-dark .wds-endorse-proj-label,
.wd-dark .wds-endorse-status { color: var(--wd-faint); }

.wd-dark .wds-endorse-text,
.wd-dark .wds-endorse-body,
.wd-dark .wds-endorse-msg,
.wd-dark .wds-endorse-row-msg { color: var(--wd-text); }

.wd-dark .wds-endorse-skill,
.wd-dark .wds-endorsed-chip,
.wd-dark .wds-endorse-badge {
    background: var(--wd-line);
    color: var(--wd-dim);
}

/* Not a chip. .wds-endorse-count is a bare number beside the heading — no
   padding and no radius in style.css — so a background turns it into a
   square block sitting against the text. Colour only. */
.wd-dark .wds-endorse-count { color: var(--wd-faint); }

/* Status pills. Each ships a light tinted fill in style.css — #fbf3d6,
   #edf7ed, #f0efe9 — so setting the text colour alone left three pale
   lozenges glowing on a dark card. Tints re-derived for a dark surface. */

.wd-dark .wds-endorse-pending {
    background: #3a2f12;
    color: #e8c65c;
}

.wd-dark .wds-endorse-approved {
    background: #1d3324;
    color: #7fc98a;
}

.wd-dark .wds-endorse-hidden {
    background: var(--wd-line);
    color: var(--wd-faint);
}

/* .wds-endorse-cta is an INFORMATION box — 14px padding, #f6f6f4 fill,
   #555 text — not a button. The first pass painted it gold alongside the
   real submit, which made a passive hint look like the primary action. */
.wd-dark .wds-endorse-cta {
    background: var(--wd-raised);
    border-color: var(--wd-line);
    color: var(--wd-dim);
}

.wd-dark .wds-endorse-cta a { color: var(--wd-gold-lo); }

/* #4287f5 blue in style.css. Gold matches the rest of the profile's CTAs. */
.wd-dark .wds-endorse-send {
    background: var(--wd-gold);
    color: var(--wd-gold-ink);
    border-color: var(--wd-gold);
}

/* Secondary control — white fill in style.css. Stays quiet next to the
   gold primary rather than competing with it. */
.wd-dark .wds-endorse-decide {
    background: var(--wd-raised);
    border-color: var(--wd-line);
    color: var(--wd-text);
}

.wd-dark .wds-endorse-decide.wds-approve {
    background: var(--wd-gold);
    border-color: var(--wd-gold);
    color: var(--wd-gold-ink);
}

.wd-dark .wds-endorse-project { color: var(--wd-dim); }
.wd-dark .wds-endorse-others,
.wd-dark .wds-endorsed-others { color: var(--wd-faint); }


/* ═══════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════

   style.css already styles .pf-block textarea and the inputs for light.
   Recoloured here, including the placeholder rules — a placeholder left at
   #0d0e29 on a dark field is invisible rather than merely low contrast. */

/* Scoped to .wd-dark, NOT to .pf-block. The endorsement form prints its
   textarea straight into .pf-left with no card around it, so a rule tied
   to .pf-block skipped it and left one white box in the middle of a dark
   page. .wd-dark is on the profile wrapper, so this reaches every field on
   the page and nothing outside it. */

.wd-dark input[type="text"],
.wd-dark input[type="email"],
.wd-dark input[type="tel"],
.wd-dark input[type="url"],
.wd-dark input[type="search"],
.wd-dark select,
.wd-dark textarea,
.wd-dark .ff-el-form-control {
    background: var(--wd-raised);
    border-color: var(--wd-line);
    color: var(--wd-text);
}

.wd-dark input::placeholder,
.wd-dark textarea::placeholder,
.wd-dark .ff-el-form-control::placeholder { color: var(--wd-faint); }

/* style.css sets its placeholders with VENDOR-PREFIXED pseudo-elements at
   `.pf-block input[type="text"]::-webkit-input-placeholder` — (0,2,2),
   higher than the plain `.wd-dark input::placeholder` above at (0,1,2).

   That is exactly why First Name, Last Name and Email came out in the old
   #0d0e29 navy while Optional Phone and the message box looked right:
   style.css only prefixes text and email inputs, it never touches tel, and
   its textarea rule is (0,1,2) — a tie with mine, which load order then
   settles in my favour. Three selectors, three different outcomes, one
   root cause.

   These are (0,3,2) and win outright.

   Prefixed and unprefixed are written as SEPARATE rules deliberately: a
   selector list containing a pseudo-element the browser does not recognise
   is discarded whole, so combining them would lose the standard rule in
   every browser that has since dropped the prefix. */

.wd-dark .pf-block input[type="text"]::placeholder,
.wd-dark .pf-block input[type="email"]::placeholder,
.wd-dark .pf-block input[type="tel"]::placeholder,
.wd-dark .pf-block input[type="url"]::placeholder,
.wd-dark .pf-block textarea::placeholder { color: var(--wd-faint); }

.wd-dark .pf-block input[type="text"]::-webkit-input-placeholder,
.wd-dark .pf-block input[type="email"]::-webkit-input-placeholder,
.wd-dark .pf-block textarea::-webkit-input-placeholder { color: var(--wd-faint); }

/* style.css sets `.pf-block textarea { border: 1px solid #cfcfd3 }`, which
   is (0,1,1) — exactly the same specificity as `.wd-dark textarea` above.
   A tie is broken by load order, and relying on load order against a
   stylesheet you do not control is how a border ends up white on a dark
   page. These selectors are (0,2,1) and settle it outright.

   Note this is why only the TEXTAREA was wrong and the inputs were fine:
   style.css gives the textarea a border but never gives the inputs one, so
   there was nothing to tie with. */
.wd-dark .pf-block input[type="text"],
.wd-dark .pf-block input[type="email"],
.wd-dark .pf-block input[type="tel"],
.wd-dark .pf-block input[type="url"],
.wd-dark .pf-block select,
.wd-dark .pf-block textarea {
    background: var(--wd-raised);
    border-color: var(--wd-line);
    color: var(--wd-text);
}

/* border-color rather than the border shorthand on purpose. The shorthand
   would also restate width and style, which is layout on a shared class —
   and it is not needed: specificity is resolved per PROPERTY, so a
   border-color at (0,2,1) beats a border shorthand at (0,1,1) for the
   colour alone and leaves the 1px solid exactly as style.css set it.

   No `outline: none` here either. Killing the focus ring to tidy up a
   border is a keyboard-accessibility regression, and the ring is doing a
   job. */
.wd-dark input:focus,
.wd-dark textarea:focus,
.wd-dark select:focus,
.wd-dark .pf-block textarea:focus,
.wd-dark .pf-block input:focus,
.wd-dark .ff-el-form-control:focus { border-color: var(--wd-gold-lo); }

.wd-dark .ff-el-input--label label,
.wd-dark .ff-el-form-check-label { color: var(--wd-dim); }

.wd-dark input[type="submit"],
.wd-dark button[type="submit"],
.wd-dark .ff-btn-submit {
    background: var(--wd-gold);
    color: var(--wd-gold-ink);
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════════

   Every name below is new. Layout is fine here — none of it exists in
   style.css, so none of it can reach the actor profile.

   The hero is the SAME surface value as the other cards. It read as a hole
   in the page when it was darker than everything around it; matching the
   cards means the page is two values plus the nav, and the hero earns its
   emphasis from the cover image and the serif name instead of from being a
   different colour. */

.wds-hero {
    background: var(--wd-card);
    border: 1px solid var(--wd-line);
    border-radius: 7px;
    overflow: hidden;
    margin: 0 0 22px 0;
    width: 100%;
}

/* Height only — the image arrives inline from the template, and an inline
   background outranks any stylesheet, so nothing here can blank a member's
   cover. 274px matches what style.css gave .pf-main-header.

   The background-color is a holding tone for the moment before the image
   paints and for a cover that fails to load; without it that gap flashes
   white against a dark card, which reads as broken. */
.wds-hero-cover {
    height: 274px;
    background-color: #2a2622;
    background-position: center;
    background-size: cover;
}

/* The top padding is what holds the name clear of the cover edge. The
   avatar reaches back up through it via its own negative margin. */
.wds-hero-body { padding: 20px 25px 25px; }


/* ── Identity row ───────────────────────────────────────────────────────
   The negative margin lifts the avatar across the cover seam — a little
   over half its height, so the circle straddles the boundary rather than
   sitting under it. style.css used -140px against a 150px avatar; this is
   the same idea at a slightly smaller size.

   align-items:flex-end pins the name baseline to the bottom of the avatar
   however far the name wraps. */

.wds-hero-id {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.wds-hero-avatar {
    flex: 0 0 auto;
    width: 130px;
    height: 130px;
    border-radius: 50%;

    /* THE LIFT LIVES HERE, NOT ON THE ROW.
       When .wds-hero-id carried the negative margin, the name and location
       were dragged up with the avatar and ended up crowding the cover
       edge — the whole block was being pulled into the image.

       Only the avatar should cross the seam. With align-items:flex-end a
       negative margin-top shortens the avatar's MARGIN box, so the row
       stays the height of the text beside it while the circle reaches up
       out of the row on its own. The name then sits wherever the body
       padding puts it, and stays there no matter how tall the avatar gets.

       140 = 130px plus the 5px ring either side. Lifting a little over
       half puts the seam just above centre, which reads as deliberate;
       exactly half looks accidental. */
    margin-top: -72px;

    /* The ring is the card colour, not white. On a dark surface a white
       ring pulls more attention than the face inside it. */
    border: 5px solid var(--wd-card);
    background: var(--wd-raised);
    overflow: hidden;
}

.wds-hero-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* min-width:0 is load-bearing. This flex item holds text that can be long,
   and flex items default to min-width:auto — without it a long name
   refuses to shrink and shoves the social icons off the right edge instead
   of wrapping. */
.wds-hero-namewrap {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: 8px;
}

.wds-hero-name {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 34px;
    line-height: 1.12;
    color: var(--wd-head);
    word-wrap: break-word;
}

.wds-hero-meta {
    font-size: 15px;
    color: var(--wd-dim);
    margin-top: 7px;
}

.wds-hero-social {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 12px;
}

/* The icon PNGs are dark artwork drawn for a light background. Rather than
   reshoot them, invert and pull the brightness back so they read as muted
   cream rather than pure white. Hover returns full strength, which gives
   the row a rollover it did not have. */
.wds-hero-social a {
    display: block;
    line-height: 0;
    filter: invert(1) brightness(0.86);
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.wds-hero-social a:hover { opacity: 1; }

.wds-hero-social img {
    display: block;
    width: 26px;
    height: auto;
}

/* The IMDb mark is wider than the round icons and looks undersized at the
   same width — style.css gave it 47px against 34px for the others. */
.wds-hero-social a.is-imdb img { width: 38px; }


/* ── Role chips ─────────────────────────────────────────────────────────
   The primary skill is what the directory search filters on, so it is what
   carries the gold. Secondaries stay muted deliberately: the old treatment
   gave all three near-identical weight, which told a producer scanning the
   page nothing about what this person is actually hired to do. */

.wds-hero-roles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
}

.wds-hero-role {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.3;
    background: var(--wd-raised);
    color: var(--wd-dim);

    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;

    /* The transparent rings are declared up front so the chip does not jump
       by 4px the moment it becomes active. Reserving the space and only
       changing the colour is what keeps the row from reflowing on click. */
    box-shadow: 0 0 0 2px transparent, 0 0 0 4px transparent;
    transition: box-shadow 0.15s ease, background 0.15s ease;
}

.wds-hero-role.is-primary {
    background: var(--wd-gold);
    color: var(--wd-gold-ink);
    font-weight: 600;
}

.wds-hero-role:hover            { background: var(--wd-line); }
.wds-hero-role.is-primary:hover { background: #ffc82e; }

/* One skill means nothing to switch between, so drop the affordances
   rather than inviting a click that does nothing. */
.is-single .wds-hero-role,
.is-single .wds-hero-role:hover {
    cursor: default;
    background: var(--wd-raised);
}

.is-single .wds-hero-role.is-primary,
.is-single .wds-hero-role.is-primary:hover { background: var(--wd-gold); }


/* ── Skill switcher ─────────────────────────────────────────────────────

   No JavaScript. Radio inputs plus sibling selectors — the same technique
   the bio expander already uses in this template. It survives page
   caching, needs no script, and cannot break if JS fails to load.

   It is also the more accessible choice. These are real radios with real
   labels, so they are keyboard-operable with arrow keys and announced as
   "Director, radio button, 1 of 3". Divs with click handlers would need a
   pile of ARIA to get halfway there.

   The nth-of-type/nth-child pairing is what avoids hardcoding ids: input 1
   drives chip 1 and panel 1, and the ids stay unique per post without the
   stylesheet needing to know them. */

/* Visually hidden but still FOCUSABLE and still hit-testable by the label.
   display:none or visibility:hidden would take the radios out of the tab
   order and break keyboard operation entirely — the usual way this
   pattern gets made inaccessible by accident. */
.wds-skill-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wds-skillswitch { position: relative; }

/* Active chip. Two rings: an inner one in the card colour to hold a gap,
   then the light gold. Without the gap ring the outline sits flush against
   the solid gold primary chip and the two golds merge. */
.wds-skill-radio:nth-of-type(1):checked ~ .wds-hero-roles .wds-hero-role:nth-child(1),
.wds-skill-radio:nth-of-type(2):checked ~ .wds-hero-roles .wds-hero-role:nth-child(2),
.wds-skill-radio:nth-of-type(3):checked ~ .wds-hero-roles .wds-hero-role:nth-child(3) {
    box-shadow: 0 0 0 2px var(--wd-card), 0 0 0 4px var(--wd-gold-ring);
}

/* Keyboard focus, kept separate from the checked ring. Arrow-keying
   through a radio group moves the selection, so without this the focused
   chip and the active chip look identical and the group is unusable
   without a mouse. */
.wds-skill-radio:nth-of-type(1):focus-visible ~ .wds-hero-roles .wds-hero-role:nth-child(1),
.wds-skill-radio:nth-of-type(2):focus-visible ~ .wds-hero-roles .wds-hero-role:nth-child(2),
.wds-skill-radio:nth-of-type(3):focus-visible ~ .wds-hero-roles .wds-hero-role:nth-child(3) {
    outline: 2px dashed var(--wd-gold-ring);
    outline-offset: 6px;
}

/* Panels. Hidden by default, and the matching one is promoted back to the
   grid that .wds-hero-stats already defines.

   SCOPED THROUGH THE PARENT ON PURPOSE. Each panel carries both
   .wds-hero-stats and .wds-skill-panel. A bare `.wds-skill-panel
   { display: none }` is (0,1,0) — exactly the same weight as
   `.wds-hero-stats { display: grid }` further down this file — so the tie
   broke on source order and every panel rendered at once.

   Adding the parent makes this (0,2,0) and settles it by specificity
   instead. Same reasoning as the textarea border earlier: a rule that only
   wins because of where it sits in the file is a rule waiting to break the
   next time something is reordered. */
.wds-skill-panels .wds-skill-panel { display: none; }

.wds-skill-radio:nth-of-type(1):checked ~ .wds-skill-panels .wds-skill-panel:nth-child(1),
.wds-skill-radio:nth-of-type(2):checked ~ .wds-skill-panels .wds-skill-panel:nth-child(2),
.wds-skill-radio:nth-of-type(3):checked ~ .wds-skill-panels .wds-skill-panel:nth-child(3) {
    display: grid;
}

/* The day rate is words, not a number. At the 26px numeral size
   "Negotiable" either dwarfs the film count beside it or wraps. */
.wds-hero-stat-num.is-text {
    font-size: 17px;
    line-height: 1.35;
    padding-top: 5px;
}


/* ── Stat strip ─────────────────────────────────────────────────────────
   Career totals rather than a grid of per-role counts. Someone deciding
   whether to reach out wants the scale of the body of work; the per-role
   split still sits in the rate rows below.

   1px gap over a background colour is a hairline trick — the parent shows
   through the gaps as dividers, so there are no border rules to get
   double-drawn at the ends. The divider has to be LIGHTER than the cells
   now that both are dark, or it vanishes. */

.wds-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 1px;
    background: var(--wd-line);
    border-radius: 7px;
    overflow: hidden;
    margin-top: 20px;
}

.wds-hero-stat {
    background: var(--wd-raised);
    padding: 15px 16px 13px;
}

.wds-hero-stat-num {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    color: var(--wd-head);
}

.wds-hero-stat-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--wd-faint);
    margin-top: 5px;
}


/* ── Hero, small screens ────────────────────────────────────────────────
   800px is the breakpoint style.css already uses to wrap .pf-main-content,
   and 700px is where it drops the cover height again. Matching those keeps
   the profile reflowing at the same widths it always did. */

@media screen and (max-width: 800px) {

    .wds-hero-cover { height: 200px; }

    .wds-hero-id {
        flex-wrap: wrap;
        gap: 14px;
    }

    /* 120 total at this size (110 + the 5px ring either side), so the lift
       scales with it — a fixed -72px against a smaller circle would push
       it clean off the top of the cover. */
    .wds-hero-avatar {
        width: 110px;
        height: 110px;
        margin-top: -62px;
    }

    /* Full width so it drops to its own line rather than being crushed
       between the avatar and the right edge. */
    .wds-hero-social {
        flex: 1 0 100%;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 700px) {

    .wds-hero-cover { height: 147px; }
    /* Top padding must stay non-zero. It is what holds the name clear of
       the cover edge now that the avatar carries the lift — a shorthand
       resetting it to 0 here reproduces the exact crowding this was
       written to fix, just on phones where it is harder to notice. */
    .wds-hero-body  { padding: 18px 18px 20px; }
    .wds-hero-name  { font-size: 27px; }
    .wds-hero-avatar {
        width: 92px;
        height: 92px;
        margin-top: -54px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   FAVOURITE FILM TILES
   ═══════════════════════════════════════════════════════════════════════
*/
  .wds-faves-card {
    padding: 24px 24px 26px;
}

.wds-fave-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.wds-fave-chip {
    display: inline-block;

    /* Sans, inherited, to match the hero role chips this borrows its shape
       from. Set font-family: Georgia here if you want the editorial feel
       the old tiles had — one line, no other consequence. */
    padding: 6px 13px;
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.35;

    /* A cool near-white rather than the page's warm cream. Against violet
       and teal, warm cream reads slightly dirty. */
    color: #f2eff7;

    /* A chip is sized by its content, so a very long title would otherwise
       push past the rail instead of wrapping. max-width caps the box;
       overflow-wrap breaks a single long word. */
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Six tints, assigned in PHP from a hash of the title, so a given film is
   the same colour on every profile and on every page load. */

.wds-fave-chip.t0 { background: #3a3147; }   /* violet     */
.wds-fave-chip.t1 { background: #2d363f; }   /* sky blue   */
.wds-fave-chip.t2 { background: #283836; }   /* teal       */
.wds-fave-chip.t3 { background: #472e34; }   /* rose       */
.wds-fave-chip.t4 { background: #353443; }   /* periwinkle */
.wds-fave-chip.t5 { background: #422f3f; }   /* orchid     */


/* Print: the tints cost toner and say nothing in greyscale. */
@media print {

    .wds-fave-chip {
        background: #eee !important;
        color: #000;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════

   Skip the black for a profile print. */

@media print {

    body.single-crew,
    .wd-dark { background: #fff; color: #000; }

    .wd-dark .pf-block,
    .wd-dark .pf-top,
    .wd-dark .pf-row,
    .wd-dark .pf-row-gray,
    .wd-dark .pf-bottom,
    .wd-dark .pf-yellow,
    .wds-hero { background: #fff; border-color: #ccc; }

    .wd-dark .pf-block h2,
    .wd-dark .pf-block h3,
    .wds-hero-name,
    .wds-hero-stat-num,
    .wd-dark .pf-stat-value { color: #000; }

    .wds-hero-meta,
    .wds-hero-stat-label,
    .wd-dark .rate-amount,
    .wd-dark .pf-stat-label { color: #444; }

    .wds-hero-cover,
    .wds-hero-social { display: none; }

    .wds-hero-avatar { margin-top: 0; border-color: #fff; }

    .wds-hero-stats { background: #ccc; }
    .wds-hero-stat  { background: #fff; }

    .wds-hero-role  { background: #eee; color: #000; }

    .wd-dark a { color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Write & Direct credits — meta type and the View film button
   rev 2026-08-09

   APPEND this to profile-dark.css. Nothing to delete — the existing
   .wd-dark .pf-credits-* colour rules stay exactly as they are, and these
   sit alongside them.

   Two separate problems, and they need two different techniques:

     · The TYPE SIZES are layout, so they hang off .wds-credits-card, a new
       class the template now carries on this one card. .pf-credits-stats,
       .pf-credits-row and .pf-credits-description are all shared with the
       actor template and must not be resized globally.

     · The BUTTON is pure colour, so it can be scoped to .wd-dark and beat
       style.css on specificity instead.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── Meta type ──────────────────────────────────────────────────────────

   These lines were inheriting 17px from .pf-container — body-copy size for
   what are really captions. At 17px "Credit(s): Writer, Director, Editor"
   wrapped to two lines in a rail-width column and read as heavily as the
   film title above it.

   Line-height comes down with the size. Leading tuned for 17px looks
   airy and disconnected at 13px, which is what made the wrapped credit
   line feel like two separate thoughts. */

.wds-credits-card .pf-credits-stats {
    font-size: 13px;
    line-height: 1.5;
}

.wds-credits-card .pf-credits-row {
    font-size: 13px;
    line-height: 1.45;
}

.wds-credits-card .pf-credits-description {
    font-size: 14px;
    line-height: 1.55;
}

.wds-credits-card .pf-credits-description a {
    font-size: 13px;
}


/* ── View film button ───────────────────────────────────────────────────

   style.css sets `background: #000` on .pf-credits-description a:link,
   which was fine on the old cream card and disappears on a dark one.

   Worth being precise about why: measured against the card it is 1.52:1,
   so it is not a contrast failure in the usual sense — it is a DIRECTION
   failure. The button is darker than the surface it sits on, so it reads
   as a hole punched in the card rather than as an object resting on it.
   Same mistake the hero made when it was darker than the page.

   #565040 puts it 1.73x ABOVE the card. Deliberately quieter than the
   IMDb badge sitting beside it (7.44x): IMDb is a brand mark that has to
   look like itself, and two competing gold blocks in one row would leave
   neither reading as the primary action. Hover takes it to gold, which is
   where the affordance lives.

   :link, :visited and :hover are all overridden — style.css declares all
   three, so leaving :visited out would give anyone who had clicked
   through a black button again on their next visit. That is exactly the
   kind of bug that never shows up in testing, because the tester has
   already cleared their history. */

.wd-dark .pf-credits-description a:link,
.wd-dark .pf-credits-description a:visited {
    background: #565040;
    color: #f7f4ec;
}

.wd-dark .pf-credits-description a:hover {
    background: var(--wd-gold);
    color: var(--wd-gold-ink);
}


@media print {

    .wd-dark .pf-credits-description a:link,
    .wd-dark .pf-credits-description a:visited {
        background: #eee;
        color: #000;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   Contact form note — crew profile
   APPEND to profile-dark.css. Nothing to delete.

   Sits between the heading and the first field, where it is read before
   anyone starts typing. Below the form it would be an apology; above it,
   it is an instruction.

   Deliberately not styled as a warning — no red, no icon, no box. The
   sentence does the work, and alarm chrome on every profile in the
   directory would make the whole place feel policed.

   --wd-dim on --wd-card is 6.44:1, so it clears AA comfortably despite
   being visibly secondary to the form labels beneath it.
   ═══════════════════════════════════════════════════════════════════════ */

.wd-dark .wds-formnote {
    font-size: 14px;
    line-height: 1.6;
    color: var(--wd-dim);
    margin: -4px 0 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   IMDb badge + union chips — crew profile
   APPEND to profile-dark.css. Nothing to delete.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. STOP INVERTING THE IMDb BADGE ───────────────────────────────────

   .wds-hero-social a carries `filter: invert(1) brightness(0.86)` so the
   dark PNG glyphs read on a dark band. That filter was hitting the IMDb
   badge too, turning its yellow-and-black lockup into blue-and-white —
   which is why it looks wrong in the hero but correct further down the
   page, where the credit rows have no filter on them.

   This is a trademark question, not a taste one. IMDb's badge is a
   registered mark with published brand rules, and recolouring it is not
   something a licence covers. The other glyphs in that row are generic
   monochrome shapes, so inverting them is fine; the IMDb lockup is not.

   The template already tags that link with .is-imdb, so this only needs
   to opt it out.

   NOTE: the same caution applies if you ever swap the X, YouTube or
   Instagram icons for their full-colour lockups. Monochrome versions are
   generally permitted to be recoloured; the branded colour versions are
   not. Keep those glyphs monochrome and this rule stays a one-off. */

.wd-dark .wds-hero-social a.is-imdb {
    filter: none;
    opacity: 1;
}

/* The badge is a solid block of brand yellow, so it does not need the
   hover fade the outline glyphs use — and dimming a trademark on hover is
   the same problem in a smaller dose. */
.wd-dark .wds-hero-social a.is-imdb:hover {
    filter: none;
    opacity: 1;
}


/* ── 2. UNION CHIPS ─────────────────────────────────────────────────────

   The fill sits only 1.10x above the card, which is under the threshold
   where an edge reads on a dark surface — the chip was dissolving into
   the panel behind it.

   Raising the fill would work, but a union is a credential and the card
   already has a gold border announcing it. A gold outline on the chip
   continues that language instead of introducing a second one.

   --wd-gold-lo at 5.49x against the fill and 6.04x against the card:
   clearly an edge, without competing with the gold border of the card it
   sits inside. Full --wd-gold would match that border exactly and the two
   would read as one shape.

   Layout is fine here — .wds-union is a class this project introduced and
   exists nowhere in style.css. The padding drops by 1px on each axis so
   the border does not change the chip's outer size. */

.wd-dark .wds-union {
    padding: 4px 11px;
    border: 1px solid var(--wd-gold-lo);
}