@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

/*
    TEMPLATE68 - "Modernist"

    Ported from the Claude Design project "Actor Template" (design system
    "modernist-fd59c719"). The token block and the component layer below are
    the design system's styles.css verbatim in intent - do not hard-code a
    hex, a font or a spacing value the tokens already carry. The .m68-* layer
    underneath is this template's own layout.

    Load order matters here: 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 has to be stated, not assumed.

    css/override.php runs AFTER this file and re-points --color-accent at the
    customer's own primary color when they have picked one.
*/

/* ══════════════════════════════════════════════════════════════════════════
   Tokens
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --color-bg: #f3f2f2;
    --color-surface: #eae9e9;
    --color-text: #201e1d;
    --color-accent: #ec3013;
    --color-accent-2: #e15b47;
    --color-divider: rgba(32, 30, 29, .4);

    /*
        What goes ON the accent - the primary button's label, the poster
        band's copy, the current chapter. The design's own red is dark enough
        to take the ground colour, but css/override.php re-points --color-accent
        at whatever the customer picked in the admin, and a pale brand color
        with a pale label on it is unreadable. So this is a token in its own
        right and override.php recomputes it with blackOrWhite().
    */
    --color-on-accent: var(--color-bg);

    /* Tonal ramps - generated in OKLCH on one shared lightness scale, so the
       same step of any role matches the others in visual value. */
    --color-neutral-100: #f8f4f4;
    --color-neutral-200: #eae7e7;
    --color-neutral-300: #d7d3d3;
    --color-neutral-400: #bab6b6;
    --color-neutral-500: #9b9797;
    --color-neutral-600: #7d7979;
    --color-neutral-700: #605d5d;
    --color-neutral-800: #444141;
    --color-neutral-900: #2d2b2b;

    --color-accent-100: #fff2ef;
    --color-accent-200: #ffe0d9;
    --color-accent-300: #ffc4b8;
    --color-accent-400: #ff9783;
    --color-accent-500: #ff563c;
    --color-accent-600: #dd2b0f;
    --color-accent-700: #ae1800;
    --color-accent-800: #7c1405;
    --color-accent-900: #4d170e;

    --font-heading: "Archivo", system-ui, sans-serif;
    --font-heading-weight: 800;
    --font-body: "Archivo", system-ui, sans-serif;

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

    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;

    --shadow-sm: 0 1px 2px rgba(45, 43, 43, .14);
    --shadow-md: 0 3px 10px rgba(45, 43, 43, .16);
    --shadow-lg: 0 12px 32px rgba(45, 43, 43, .22);

    /* Page gutter - one value so every band lines up on the same grid. */
    --m68-gutter: 44px;
    --m68-max: 1240px;
}

/* ══════════════════════════════════════════════════════════════════════════
   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: 15px;
    line-height: 1.55;
    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.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
    color: var(--color-text);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
/*
    Text-size color comes from a DEEP ramp step, not the accent itself. The
    accent-to-ground pair is tuned to ~3:1 - enough for icons, large type and
    interface chrome, not for something you read. The accent stays for fills
    (the primary button, the poster band, the current chapter); anything set
    in it at body size uses -700. That matters more once css/override.php
    swaps in a customer's own color, which may be far paler than this red.
*/
a { color: var(--color-accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: var(--color-neutral-600); }
hr { border: 0; height: 2px; background: var(--color-divider); margin: var(--space-4) 0; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 18px; list-style: disc; }
ol { list-style: decimal; }
blockquote { margin: 0 0 var(--space-3); padding-left: var(--space-4); border-left: 2px solid var(--color-divider); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-accent-300); }

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

/*
    Photographs run in color.

    The source design prints them in black and white, and this template did
    too at first - a CSS grayscale filter on .shot with hover restoring the
    color. That was the wrong layer to decide it at. Monochrome is already 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 filter here overrode
    that choice for everybody and could not be turned off, and it fought the
    setting rather than reading it: an owner who had switched monochrome ON
    got a doubled treatment, one who left it off got it anyway.

    So .shot is kept as the single hook every content photograph in this
    design carries - one place to change how imagery is treated - but it
    applies no color transform of its own. The platform decides.

    .grayscale is the design system's own utility class, kept so markup
    copied from the system's component pages still resolves. Nothing in this
    template applies it.
*/
.shot { transition: opacity .25s; }
.grayscale { filter: grayscale(1) contrast(1.08); }

/* ══════════════════════════════════════════════════════════════════════════
   Components - the design system's own classes
   ══════════════════════════════════════════════════════════════════════════ */

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; text-decoration: none;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 14px; line-height: 1.2; color: var(--color-text);
    background: transparent; border: 1px solid transparent;
    padding: var(--space-2) calc(var(--space-3) * 1.2);
    border-radius: var(--radius-md);
}
.btn:hover { text-decoration: none; }
.btn svg { display: block; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: rgba(32, 30, 29, .07); color: var(--color-text); }
.btn-secondary:active { background: rgba(32, 30, 29, .14); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: rgba(236, 48, 19, .1); color: var(--color-accent-800); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }
/*
   Inverted, for the accent-field bands. Deliberately the ground plus the DEEP
   accent step rather than the accent itself: the ground is light whatever the
   customer picks, and accent-700 is always a darkened version of their color,
   so this pair stays readable even when the accent is pale.
*/
.btn-inverse { background: var(--color-bg); color: var(--color-accent-700); }
.btn-inverse:hover { background: #fff; color: var(--color-accent-700); }

.input {
    width: 100%; min-height: 36px; padding: 6px 10px;
    font-family: var(--font-body); font-size: 14px;
    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: rgba(32, 30, 29, .45); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

.tag {
    display: inline-flex; align-items: center; font-size: 11px;
    letter-spacing: .02em; padding: 3px 10px; border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent-700); }

.card {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: .8; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-neutral-600); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-neutral-600);
    padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table tbody tr:hover { background: rgba(32, 30, 29, .04); }

/* ══════════════════════════════════════════════════════════════════════════
   Shell - header, page head, footer
   ══════════════════════════════════════════════════════════════════════════ */

.m68 { max-width: var(--m68-max); margin: 0 auto; background: var(--color-bg); }

.m68-nav {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--m68-gutter);
    border-bottom: 2px solid var(--color-divider);
}
.m68-brand {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 18px; letter-spacing: .02em; text-transform: uppercase;
    margin-right: auto; color: var(--color-text);
}
.m68-brand:hover { color: var(--color-text); text-decoration: none; }
.m68-links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.m68-links a { color: inherit; font-size: 14px; }
.m68-links a:hover,
.m68-links a[aria-current="page"] { color: var(--color-accent-700); text-decoration: none; }

/* Mobile menu - a checkbox, so the header needs no script of its own. */
.m68-navtoggle { display: none; }
.m68-burger { display: none; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 6px; }

.m68-mast {
    padding: var(--space-8) var(--m68-gutter) var(--space-6);
    border-bottom: 2px solid var(--color-divider);
    display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6);
}
.m68-mast h1 { font-size: 64px; letter-spacing: .06em; line-height: .95; margin: 0; text-transform: uppercase; }
.m68-mast-meta { font-size: 13px; letter-spacing: .1em; color: var(--color-accent-700); padding-bottom: 8px; text-transform: uppercase; white-space: nowrap; }

.m68-foot { border-top: 2px solid var(--color-divider); padding: var(--space-6) var(--m68-gutter); }
.m68-foot-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.m68-foot-links img { width: 24px; height: 24px; }
.m68-foot-copy { font-size: 12px; color: var(--color-neutral-600); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }

/* Every band on the page shares one gutter and one 2px rule. */
.m68-band { padding: var(--space-8) var(--m68-gutter); border-bottom: 2px solid var(--color-divider); }
.m68-band:last-child { border-bottom: 0; }
.m68-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.m68-band-head h2, .m68-band-head h3 { margin: 0; }
.m68-split { display: grid; grid-template-columns: 1.1fr 1fr; }
.m68-split > * { padding: var(--space-8) var(--m68-gutter); }
.m68-split > *:first-child { border-right: 1px solid var(--color-divider); }

/* ══════════════════════════════════════════════════════════════════════════
   Home
   ══════════════════════════════════════════════════════════════════════════ */

.m68-hero { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--color-divider); }
.m68-hero-copy {
    padding: var(--space-8) var(--m68-gutter);
    display: flex; flex-direction: column; justify-content: center;
    border-right: 2px solid var(--color-divider);
}
.m68-hero-copy h1 { font-size: 72px; line-height: .92; margin: 0 0 18px; }
/*
    The owner's title, under the name on version 1.

    Version 1 showed the name and the bio but never said what the person does.
    It takes the masthead's small uppercase accent voice rather than a second
    size of body text, and pulls up tight under the name so it reads as part
    of the same block rather than as the start of the paragraph below it.
*/
.m68-hero-role {
    font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--color-accent-700); margin: -10px 0 18px;
}
.m68-hero-lede { font-size: 16px; max-width: 38ch; margin: 0 0 20px; }
.m68-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.m68-hero-photo { width: 100%; height: 100%; object-fit: cover; min-height: 520px; }

.m68-facts { border-top: 2px solid var(--color-divider); padding-top: var(--space-4); display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 14px; }
.m68-facts dt, .m68-facts .m68-fact-k { color: var(--color-neutral-600); margin: 0; }
/*
    Features standing as a column of its own, rather than as a postscript to
    the hero.

    The rule above gives the list a top border and padding because it sat
    directly under the hero's buttons and had to be separated from them. In a
    column that already carries an <h3> over it, that same border draws a line
    between the heading and the list it belongs to.
*/
.m68-facts-plain { border-top: 0; padding-top: 0; }
.m68-facts dd, .m68-facts .m68-fact-v { margin: 0; }

/* Selected work / project posters */
.m68-posters { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.m68-poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; margin-bottom: var(--space-2); background: var(--color-surface); }
.m68-poster-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.15; }
.m68-poster-meta { font-size: 12px; color: var(--color-neutral-600); }

/* "Now playing" - poster beside a blurb */
.m68-now { display: grid; grid-template-columns: 106px 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
.m68-now:last-child { margin-bottom: 0; }
.m68-now img { width: 106px; aspect-ratio: 2/3; object-fit: cover; background: var(--color-surface); }
.m68-now-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; }
.m68-now-title span { color: var(--color-neutral-600); font-weight: 400; font-size: 14px; }

/*
    The poster statement - the one place the accent runs as a field. Used by
    the home page's closing band and by the contact page.
*/
.m68-poster-band {
    background: var(--color-accent); color: var(--color-on-accent);
    padding: 44px var(--m68-gutter);
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
    border-bottom: 0;
}
/* Links underline in the band; the button in it is a button, not a link. */
.m68-poster-band a:not(.btn) { color: var(--color-on-accent); text-decoration: underline; }
.m68-poster-statement { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 52px; line-height: .98; }

/* ══════════════════════════════════════════════════════════════════════════
   Gallery - the five-square block and the lightGallery grid
   ══════════════════════════════════════════════════════════════════════════ */

/*
    Hero plus four cropped squares. Written so it degrades honestly: with
    fewer than five photographs the remaining cells simply are not there and
    the hero keeps its 2-row span only while there is something beside it.
*/
/*
    50 / 25 / 25. The lead frame takes half the width and the four small
    squares fill the two columns beside it across two rows, so they come out
    the same size as each other rather than merely smaller than the lead.

    Was 1.62fr 1fr 1fr, a golden-ratio lead at roughly 45%, which left the
    smalls slightly wider than half the lead and read as uneven.
*/
.m68-squares { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3); }
.m68-square { position: relative; cursor: pointer; min-width: 0; }
.m68-square img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface); }
/*
    The hero frame spans both rows of the block, so its image takes the cell's
    height instead of a square ratio. With a single photograph there is no
    second column to span and the block collapses to one wide frame.
*/
/*
    The lead frame fills the height of the two rows beside it, and crops.

    A strict square does not work here and it is worth writing down why. At
    2fr against two 1fr columns the lead is half the block wide, so a square
    lead is half the block tall. The column beside it is two small squares
    plus the gap between them, which is half the block PLUS one gap. So a
    square lead always finishes one gap short, leaving a strip of empty space
    under it exactly as wide as the spacing between the photographs, which
    reads as a mistake rather than as a margin.

    The design solves it by stretching the lead and cropping, not by
    reshaping the grid: in the source it is height:100% with
    align-self:stretch and object-fit:cover, while the four small frames are
    aspect-ratio:1. object-fit means the portrait is cropped to fit rather
    than distorted, so the lead comes out very slightly taller than square
    and the block has a flat bottom edge.
*/
.m68-square-lead { grid-row: span 2; align-self: stretch; }
.m68-square-lead img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.m68-squares-solo { grid-template-columns: 1fr; }
.m68-squares-solo .m68-square-lead { grid-row: auto; }
.m68-squares-solo .m68-square-lead img { aspect-ratio: 3/2; height: auto; }
.m68-square .m68-grid-label { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 10px; background: rgba(32, 30, 29, .72); color: var(--color-bg); }

/*
    Home variant 2 (canvas 1a) opens on the name at full width with the union
    beside it, where variant 1 opens on the split hero.

    No media query of its own: the row wraps and the type is fluid, so it
    reaches a phone without needing to agree with this file's breakpoint. The
    squares underneath are the gallery block above, which brings its own.
*/
/*
    Home variant 2's heading is the masthead, not a second thing that looks
    like one.

    It had its own fluid clamp and its own padding, so it sat at a different
    size and a different rhythm to every inner page, and it printed the name
    the masthead above it had already printed. It now matches .m68-mast
    exactly and carries the owner's title instead.
*/
.m68-topline {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--m68-gutter) var(--space-6);
    border-bottom: 2px solid var(--color-divider);
}
.m68-topline h1 { font-size: 64px; letter-spacing: .06em; line-height: .95; margin: 0; text-transform: uppercase; }
.m68-topline-meta { font-size: 13px; letter-spacing: .1em; color: var(--color-accent-700); padding-bottom: 8px; text-transform: uppercase; white-space: nowrap; }

/*
    A layout that cannot draw itself yet says so, in the page, with the one
    link that fixes it. Shown instead of a broken-looking band.
*/
.m68-needs {
    padding: var(--space-8) var(--m68-gutter);
    border-bottom: 2px solid var(--color-divider);
}
.m68-needs h3 { margin: 0 0 var(--space-2); }
.m68-needs p { max-width: 62ch; }

.m68-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.m68-grid-item { position: relative; cursor: pointer; }
.m68-grid-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: var(--color-surface); }
.m68-grid-item .m68-grid-label {
    font-size: 12px; color: var(--color-neutral-600); margin-top: 6px;
    display: flex; align-items: baseline; gap: 6px;
}
.m68-grid-item[data-type="video"] .m68-grid-label::before { content: "\25B6"; color: var(--color-accent-700); font-size: 10px; }

/*
    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.
*/
.m68-audio-cell { cursor: pointer; }
.m68-audio-cell .shot { opacity: .72; transition: opacity .2s ease; }
.m68-audio-cell:hover .shot, .m68-audio-cell.playing .shot { opacity: 1; }
.m68-audio-cell .sound-title {
    position: absolute; left: 0; right: 0; top: 0; bottom: auto;
    margin: 0; padding: 6px 10px;
    background: rgba(32, 30, 29, .72); color: var(--color-bg);
}
.m68-audio-cell .sound-controls {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 8px 10px; background: rgba(32, 30, 29, .82);
}
.m68-audio-cell .jp-interface { display: flex; align-items: center; gap: 10px; }
.m68-audio-cell .jp-controls { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.m68-audio-cell .jp-controls a {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--color-accent); color: var(--color-on-accent);
}
.m68-audio-cell .jp-play::before {
    content: ""; margin-left: 2px;
    border-left: 8px solid currentColor;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.m68-audio-cell .jp-pause::before {
    content: ""; width: 8px; height: 10px;
    border-left: 3px solid currentColor; border-right: 3px solid currentColor;
}
.m68-audio-cell .jp-progress { flex: 1; height: 3px; background: rgba(234, 233, 233, .3); }
.m68-audio-cell .jp-seek-bar { height: 100%; background: rgba(234, 233, 233, .2); }
.m68-audio-cell .jp-play-bar { height: 100%; background: var(--color-accent); }
.m68-audio-cell .jp-jplayer { position: absolute; width: 0; height: 0; overflow: hidden; }

.m68-filter { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.m68-filter a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); cursor: pointer; }
.m68-filter a.current, .m68-filter a:hover { color: var(--color-accent-700); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════════════════
   Reel
   ══════════════════════════════════════════════════════════════════════════ */

.m68-reel { position: relative; background: var(--color-text); }
.m68-reel-poster { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .85; }
.m68-reel-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--space-8) var(--m68-gutter); color: var(--color-bg);
}
.m68-reel-play {
    width: 74px; height: 74px; background: var(--color-accent); color: var(--color-on-accent);
    border: 0; cursor: pointer; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center; margin-bottom: auto;
}
.m68-reel-play:hover { background: var(--color-accent-600); }
.m68-reel-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 40px; line-height: 1; margin-bottom: 6px; text-transform: uppercase; }
.m68-reel-meta { font-size: 14px; opacity: .85; margin-bottom: var(--space-4); }
.m68-reel-rule { height: 4px; background: rgba(243, 242, 242, .32); position: relative; }
.m68-reel-rule > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); width: 0; }
.m68-reel-frame { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

/*
    The bio strip beside the player. The portrait is pinned to the top of its
    column at a fixed ratio rather than stretched to the row's height: with a
    long bio the row runs to several screens, and object-fit:cover on a 250px
    column then crops the headshot down to a band of hair.
*/
/*
    The headshot is one chapter wide.

    The chapter row above it is repeat(4, 1fr), so 25% puts the portrait
    exactly under the first chapter and the copy beside it starts on the
    second. A fixed 250px was close at one window width and wrong at every
    other, which is what made the strip look unrelated to the row above it.
*/
.m68-bio-strip { display: grid; grid-template-columns: 25% 1fr; border-bottom: 2px solid var(--color-divider); }
.m68-bio-strip > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; align-self: start; border-right: 1px solid var(--color-divider); }
.m68-bio-strip > div { padding: var(--space-8) var(--m68-gutter); }

.m68-chapters { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--color-divider); }
.m68-chapter {
    text-align: left; background: var(--color-bg); color: var(--color-text);
    border: 0; border-right: 1px solid var(--color-divider);
    padding: 18px 20px; cursor: pointer; font-family: var(--font-body); width: 100%;
}
.m68-chapter:last-child { border-right: 0; }
.m68-chapter:hover { background: var(--color-surface); }
.m68-chapter.is-current { background: var(--color-accent); color: var(--color-on-accent); }
.m68-chapter-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.m68-chapter-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; margin-top: 2px; }
.m68-chapter-meta { font-size: 12px; opacity: .75; }

/* ══════════════════════════════════════════════════════════════════════════
   Credits, press, profile
   ══════════════════════════════════════════════════════════════════════════ */

.m68-year { font-variant-numeric: tabular-nums; color: var(--color-neutral-600); white-space: nowrap; }
.m68-title-cell { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.m68-press { display: grid; gap: var(--space-6); }
.m68-press-item { display: grid; grid-template-columns: 160px 1fr; gap: var(--space-4); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-divider); }
.m68-press-item:last-child { border-bottom: 0; padding-bottom: 0; }
.m68-press-item.is-textonly { grid-template-columns: 1fr; }
.m68-press-item img { width: 100%; object-fit: cover; background: var(--color-surface); }
.m68-press-meta { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: 4px; }

.m68-skills { display: flex; flex-wrap: wrap; gap: 6px; }

/*
    Link and download cards, on More. The platform stores a link's label as a
    slug ("imdb", "access"), so the card leads with getLinks()' written-out
    ['title'] and puts the host underneath - which is the part a visitor
    actually recognises.
*/
.m68-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.m68-linkcard {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-divider);
}
.m68-linkcard:hover { background: var(--color-neutral-200); color: var(--color-text); text-decoration: none; border-color: var(--color-accent); }
.m68-linkcard-name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.2; }
.m68-linkcard-meta { font-size: 12px; color: var(--color-neutral-600); }

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

.m68-contact-form { display: grid; gap: 10px; }
.m68-contact-form .m68-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m68-contact-form input[type="submit"] { cursor: pointer; }

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

   Six pages exist on essentially every account: profile, contact, portfolio,
   experience, more and training (~1,790 accounts each). 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 .m68-* block in
   .m68-band.m68-fallback, which is what gives it the page gutter: without it
   the content sat flush against the container edge, 44px to the left of the
   masthead and the menu above it. That was the visible break in uniformity.

   Everything below dresses that markup in the design's own terms - the same
   2px section rules, the same heading scale, the same muted meta line - so an
   un-ported page reads as part of the design rather than as raw reset output.
   ====================================================================== */

/*
    Section rhythm. template00's pages emit one .section per block (Press,
    Reviews, Awards, Links, ...), so they get the same rule between them that
    this design puts between its own bands.
*/
.m68-fallback > .section + .section,
.m68-fallback > div + div:not(.clr) {
    margin-top: var(--space-8); padding-top: var(--space-8);
    border-top: 2px solid var(--color-divider);
}
.m68-fallback > .section > h2:first-child,
.m68-fallback > div > h2:first-child { margin: 0 0 var(--space-4); }
.m68-main .section { margin-bottom: 0; }
.m68-main .clr { clear: both; }

/*
    .value-name is template00's universal row: a .value (the thing) and a
    .name (what it is). Rendered as a ruled row rather than as two spans
    running together, which is how it reads unstyled.
*/
.m68-main .value-name { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.m68-main .value-name:last-child { border-bottom: 0; }
.m68-main .value-name .value,
.m68-main .value-name > .value {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight);
    font-size: 16px; line-height: 1.25;
}
.m68-main .value-name .name { display: block; font-size: 13px; color: var(--color-neutral-600); }
.m68-main .value-name .name .date { font-variant-numeric: tabular-nums; }
.m68-main .value-name .body { margin-top: var(--space-2); font-size: 14px; }

/* Press, in the fallback markup more.php reuses. */
.m68-main .press-item h3.value { font-size: 20px; margin: 0; }
.m68-main .press-item .medium { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.m68-main .press-item .author,
.m68-main .press-item .date { font-size: 11px; }
.m68-main .press-item img { width: 160px; height: auto; float: left; margin: 0 var(--space-4) var(--space-2) 0; }

/* Links, awards, reviews, education, training, sitemap. */
.m68-main .link.value-name .value { font-size: 15px; }
.m68-main .review .value { font-family: var(--font-body); font-weight: 400; font-size: 15px; font-style: italic; }
.m68-main .sitemap-list { list-style: none; margin: 0; padding: 0; }
.m68-main .sitemap-list .value { display: inline-block; }

.m68-main .tags {
    display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em;
    padding: 3px 10px; margin: 0 4px 4px 0;
    background: var(--color-neutral-100); color: var(--color-neutral-800);
}
.m68-main .img-responsive, .m68-main .img-thumbnail { max-width: 100%; height: auto; }
.m68-main .embed-responsive { position: relative; width: 100%; padding-top: 56.25%; }
.m68-main .embed-responsive iframe,
.m68-main .embed-responsive .embed-responsive-item { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m68-main .videos-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-6); }
.m68-main .credit-separator { height: 1px; background: var(--color-divider); margin: var(--space-4) 0; }
.m68-main #features .section { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px var(--space-4); }

/*
    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; this turns any row of them into a real grid.
*/
.m68-fallback .row,
.m68-main .template00-gallery .row {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4);
}
.m68-fallback [class*="col-"],
.m68-main .template00-gallery [class*="col-"] { width: auto; max-width: none; padding: 0; float: none; }
.m68-fallback .container, .m68-fallback .container-fluid { width: auto; max-width: none; padding: 0; margin: 0; }

.m68-main #filter { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.m68-main #filter a { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-600); }
.m68-main #filter a.current { color: var(--color-accent-700); }

/*
    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 bare masthead over an
    empty page reads as broken rather than as empty.
*/
.m68-empty p { margin: 0 0 var(--space-4); color: var(--color-neutral-600); }
.m68-empty-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

/* ======================================================================
   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 sat edge to edge. The two
   halves are laid out side by side here, which is what the design's own
   contact block does with its own fields.
   ====================================================================== */

/*
    display:contents on the two wrapper divs so their fields become items of
    the form's own grid. That is what gets the design's layout - name and
    email on one row, subject and message full width - out of markup that is
    fixed and shared with every other template. Where it is not supported the
    fields simply stack, which is what they did before and 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. A form built with
    $show_subject off has two holders and the rule matches nothing, which is
    the right outcome rather than a wrong one.
*/
.m68-main #contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }
.m68-main #contact-form-left,
.m68-main #contact-form-right { display: contents; }
.m68-main #contact .contact-field-holder { margin: 0; }
.m68-main #contact .contact-field-holder:nth-of-type(3) { grid-column: 1 / -1; }
.m68-main #contact textarea,
.m68-main #contact input[type="submit"] { grid-column: 1 / -1; }
.m68-main #contact input[type="text"], .m68-main #contact textarea {
    width: 100%; min-height: 38px; padding: 8px 10px; display: block;
    font-family: var(--font-body); font-size: 14px; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 0;
}
.m68-main #contact input[type="text"]:focus-visible,
.m68-main #contact textarea:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.m68-main #contact textarea { min-height: 128px; resize: vertical; }
.m68-main #contact input[type="submit"] {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px;
    background: var(--color-accent); color: var(--color-on-accent); border: 0; cursor: pointer;
    padding: var(--space-3) calc(var(--space-3) * 1.2); text-align: left; width: 100%;
}
.m68-main #contact input[type="submit"]:hover { background: var(--color-accent-600); }
.m68-main #contact label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--color-neutral-700); }
.m68-main .status-success, .m68-main .status-error { font-size: 13px; padding: 8px 10px; margin-bottom: var(--space-3); }
.m68-main .status-success { background: var(--color-accent-100); color: var(--color-accent-800); }
.m68-main .status-error { background: var(--color-neutral-200); color: var(--color-neutral-900); }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive - the grid collapses column by column, the rules stay 2px.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .m68-posters { grid-template-columns: repeat(3, 1fr); }
    .m68-chapters { grid-template-columns: repeat(2, 1fr); }
    .m68-chapter:nth-child(2n) { border-right: 0; }
    .m68-hero-copy h1 { font-size: 56px; }
    .m68-mast h1 { font-size: 48px; }
    .m68-poster-statement { font-size: 40px; }
}

@media (max-width: 820px) {
    :root { --m68-gutter: 22px; }

    .m68-burger { display: block; margin-left: auto; }
    .m68-brand { margin-right: 0; }
    .m68-links {
        display: none; width: 100%; flex-direction: column; align-items: flex-start;
        gap: var(--space-2); padding-top: var(--space-3);
    }
    .m68-navtoggle:checked ~ .m68-links { display: flex; }
    .m68-nav { flex-wrap: wrap; }

    .m68-hero { grid-template-columns: 1fr; }
    .m68-hero-copy { border-right: 0; border-bottom: 2px solid var(--color-divider); }
    .m68-hero-copy h1 { font-size: 44px; }
    .m68-hero-photo { min-height: 0; aspect-ratio: 4/5; }

    .m68-split { grid-template-columns: 1fr; }
    .m68-split > *:first-child { border-right: 0; border-bottom: 1px solid var(--color-divider); }

    .m68-posters { grid-template-columns: repeat(2, 1fr); }
    .m68-squares { grid-template-columns: 1fr 1fr; }
    .m68-squares .m68-square-lead { grid-row: auto; aspect-ratio: 1; height: auto; }
    .m68-chapters { grid-template-columns: 1fr; }
    .m68-chapter { border-right: 0; border-bottom: 1px solid var(--color-divider); }

    .m68-poster-band { grid-template-columns: 1fr; gap: var(--space-6); }
    .m68-poster-statement { font-size: 34px; }
    .m68-mast { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
    .m68-mast h1 { font-size: 36px; }
    .m68-mast-meta { padding-bottom: 0; }
    .m68-press-item { grid-template-columns: 1fr; }
    .m68-bio-strip { grid-template-columns: 1fr; }
    .m68-bio-strip > img { aspect-ratio: 3/2; border-right: 0; border-bottom: 1px solid var(--color-divider); }
    .m68-reel-title { font-size: 26px; }
    .m68-reel-play { width: 56px; height: 56px; font-size: 18px; }
    .m68-contact-form .m68-pair { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .m68-posters { grid-template-columns: 1fr 1fr; }
    .m68-hero-copy h1 { font-size: 36px; }
}

@media print {
    .m68-nav, .m68-foot, .m68-reel, .m68-poster-band { display: none; }
    .grayscale { filter: none; }
}