/* MUD site styles — identity only. Layout comes from Bootstrap and the
   common library; this file holds the things Bootstrap has no opinion about.

   The palette is Mark's, from the v2 prototype: warm and low-contrast, with
   no pure black or white anywhere. Pure values would read as generic web
   chrome against the studio photography. See MUD.md, entry "palette". */

/* The palette has two tiers. The first is the raw range — six colors, no
   opinion about where they go. The second names ROLES, and every role
   resolves to a tier-one color or a provable derivative of one.

   The second tier is the useful one: it makes unfilled slots visible. A link
   with no named color is not neutral, it is Bootstrap blue — a decision
   nobody made, in the one direction this palette excludes. */

:root {
    /* Tier one — the range. */
    --mud-ink:    #27231d;   /* body text; a near-black brown */
    --mud-muted:  #655f55;   /* secondary text, captions, kickers */
    --mud-paper:  #f3eee4;   /* page background; warm cream */
    --mud-line:   #aaa08e;   /* borders and rules */
    --mud-accent: #626853;   /* olive; buttons, footer, navbar */
    --mud-white:  #fffaf0;   /* off-white; photo mattes */

    /* Derivatives — darker and lighter accent, for states that need to
       differ from the accent without leaving it. */
    --mud-accent-dark:  #555b47;   /* hover/active on a filled control */
    --mud-accent-light: #e6e6dc;   /* tints: hover rows, disabled fills */
    --mud-danger:       #9c4f3f;   /* brick; destructive, and the admin bar */
    --mud-danger-dark:  #85422f;

    /* Tier two — roles. What a thing IS, not what color it happens to be. */
    --mud-link:            var(--mud-accent);
    --mud-link-hover:      var(--mud-accent-dark);
    --mud-border:          var(--mud-line);
    --mud-focus-ring:      rgba(98, 104, 83, 0.35);
    --mud-surface:         transparent;        /* cards, panels */
    --mud-surface-header:  var(--mud-accent-light);
}

body {
    background-color: var(--mud-paper);
    color: var(--mud-ink);
}

/* Links. Bootstrap's default blue measures 3.89:1 against paper — below the
   WCAG AA floor of 4.5 — while the accent olive measures 5.01:1, so the
   on-palette choice is also the more readable one. Olive already means
   "interactive" here by way of the buttons; links inherit that for free. */
a {
    color: var(--mud-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--mud-link-hover);
}

/* Focus rings follow the accent rather than Bootstrap's blue glow. */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible {
    border-color: var(--mud-accent);
    box-shadow: 0 0 0 0.2rem var(--mud-focus-ring);
    outline: none;
}

/* ---------------------------------------------------------------- navbar */

/* The navbar renders INSIDE the page container, so a capped page boxes the
   bar in and leaves paper down both sides. The bar is a background band like
   the banner and footer — it spans the window; only its contents sit in the
   column, which SITE_CONTAINER_CLASS already handles. */
.site-navbar {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Workspace navbar variant — olive, per the palette. */
.site-navbar-public {
    background-color: var(--mud-accent);
    border-bottom: 1px solid var(--mud-line);
}

.site-navbar-public .navbar-brand,
.site-navbar-public .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

/* The brand spells out what the mark can't yet say on its own — nobody
   reading M.U.D. knows it means Many Undefined Doings. It retires from the
   navbar the day the mark carries that recognition by itself.

   Set in the sans, not the body serif: the mark is already the ornate thing
   in the navbar, and a serif beside it makes two decorative elements compete.
   The whole text layer stays quiet so the mark carries the character. */
.site-navbar-public .navbar-brand {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-white);
}

/* Sans, not the page's Georgia — but sentence case and untracked. Mark's
   prototype sets these uppercase, tracked and semibold; against a mark this
   ornate that is three emphasis treatments on the same five words, and the
   bar reads as loud. Plain labels let the mark be the thing you look at. */
.site-navbar-public .nav-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
}

.site-navbar-public .nav-link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.site-navbar-public .avatar-circle {
    background-color: rgba(255, 255, 255, 0.2);
}

/* The mark is black line art on transparency. Inverting it to cream costs
   one filter and keeps a single asset serving both the olive navbar and any
   light background it lands on later. */
.site-navbar-public .site-navbar-logo,
.site-navbar-system-admin .site-navbar-logo {
    height: 40px;
    filter: invert(1) brightness(1.08);
}

/* System admin — common's workspace, not MUD's, and deliberately OFF-palette.
   A redder, cooler brick than the studio's: being in system configuration
   should feel like somewhere else, not another room of the same building. */
.site-navbar.site-navbar-system-admin {
    background-color: #8c3a30;
    border-bottom: 1px solid var(--mud-line);
}

.site-navbar.site-navbar-system-admin .navbar-brand {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-white);
}

.site-navbar.site-navbar-system-admin .nav-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
}

/* The studio workspace — where Mark works. Brick, so it is obvious at a glance
   that this is not the public site; the darker olive was too close to the
   public navbar to read as a different place. */
.site-navbar.site-navbar-mud {
    background-color: var(--mud-danger);
    border-bottom: 1px solid var(--mud-line);
}

.site-navbar-mud .navbar-brand {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--mud-white);
}

.site-navbar-mud .nav-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.site-navbar-mud .nav-link:hover {
    color: #fff;
}

.site-navbar-mud .avatar-circle {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ------------------------------------------------------------------ type */

/* Mark's prototype sets Georgia for body copy and a sans for the small
   tracked labels. Headings carry the character, so they get the serif and
   the tight leading; Bootstrap's own sizing scale is left alone. */
body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.mud-lead {
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.1;
}

.mud-lead {
    font-size: 1.6rem;
    line-height: 1.3;
    max-width: 55ch;
}

/* Small tracked caps — Mark uses these above section headings. */
.mud-kicker {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mud-muted);
}

/* ---------------------------------------------------------------- pieces */

.mud-muted {
    color: var(--mud-muted);
}

/* Sections alternate surface rather than being ruled apart. A hairline plus
   tight padding is the document look — report, contract — and a big empty gap
   without one just reads as slack. Changing the ground states the boundary
   outright, which buys back the padding that was standing in for it.

   Full-bleed like the banner and footer: the band has to reach the viewport
   edges or it is a stripe rather than a ground. */
.mud-section {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* The band bleeds to the edges; its CONTENT stays in the same column as
   everything else. Bootstrap's own .container does the capping, so the widths
   are not restated here and cannot drift from the rest of the page. */
.mud-section > .container {
    padding-left: 0;
    padding-right: 0;
}

.mud-section-tint {
    background-color: var(--mud-white);
}

/* A section heading needs room beneath it before its content starts, and the
   kicker needs room above the heading it labels. Set here rather than as
   utility classes on each section so the rhythm is stated once. */
.mud-section-head {
    margin-bottom: 2.5rem;
}

.mud-section-head .mud-kicker {
    margin-bottom: 0.75rem;
}

.mud-section-head h2 {
    margin-bottom: 0;
}

/* When the heading sits beside its content rather than above it, the gap is
   horizontal — and at these column widths the default gutter is not enough. */
@media (min-width: 992px) {
    .mud-section-head-aside {
        padding-right: 3.5rem;
        margin-bottom: 0;
    }
}

/* Banner — the studio as atmosphere, not as an illustration of it.
   Full-bleed out of the chrome's container padding, the way the footer is,
   so nothing frames it: a matte would make the photo an object ON the page
   instead of the page's own ground. */
.mud-banner {
    position: relative;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    min-height: 62vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center 40%;   /* faces sit above center */
    color: var(--mud-white);
}

/* Sub-page banner — the same photographic language, a third the height.
   A hero exists to make someone who has not committed care; a visitor on a
   sub-page already clicked, and a full-height banner just delays what they
   came for. But dropping straight to a headline on paper after a photographic
   home page reads as a different site. So: consistent treatment, subordinate
   weight. */
.mud-page-banner {
    min-height: 32vh;
}

.mud-page-banner .mud-banner-name {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

/* Photographs are not designed backgrounds — contrast lands wherever it
   lands. A scrim buys legible text without dimming the whole image. */
.mud-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(31, 28, 22, 0.78) 0%,
        rgba(31, 28, 22, 0.55) 45%,
        rgba(31, 28, 22, 0.20) 100%);
}

.mud-banner > * {
    position: relative;   /* above the scrim */
}

.mud-banner-name {
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 700;
    line-height: 0.9;
    margin-bottom: 1rem;
}

.mud-banner-claim {
    font-size: clamp(1.15rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    max-width: 30ch;
    margin-bottom: 1.75rem;
}

.mud-banner .mud-kicker {
    color: rgba(255, 250, 240, 0.8);
}

@media (max-width: 767px) {
    .mud-banner {
        min-height: 72vh;
    }
    /* Narrow screens have no room for a horizontal fade — darken evenly. */
    .mud-banner::before {
        background: rgba(31, 28, 22, 0.62);
    }
}

/* Photo matte — the off-white border Mark frames studio photos with.
   A gallery convention: it says "this is a discrete piece, consider it on its
   own." Right in the gallery, wrong on a banner. */
.mud-photo-frame {
    border: 1px solid var(--mud-line);
    background-color: var(--mud-white);
    padding: 10px;
}

.mud-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Event rows — date in a fixed column, detail beside it. Hairlines BETWEEN
   rows are structure within one list, which is different from ruling off
   whole sections: here the line says "another of the same", not "new topic". */
.mud-event {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--mud-line);
}

.mud-event:first-child {
    border-top: 1px solid var(--mud-line);
}

.mud-event-date {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-muted);
    padding-top: 0.2rem;
}

.mud-event-title {
    font-size: 1.5rem;
    margin: 0 0 0.35rem;
}

@media (max-width: 575px) {
    .mud-event {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

/* Social links — one component, two presentations. Icon-only is the footer
   convention; the contact page pairs each icon with its handle, because there
   reaching out IS the content rather than a courtesy in the margin. */
.mud-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
}

.mud-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.mud-social svg {
    width: 22px;
    height: 22px;
    flex: none;
}

/* Icon-only: the handle is present for screen readers but not drawn. */
.mud-social:not(.mud-social-labelled) .mud-social-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.mud-social-labelled {
    flex-direction: column;
    gap: 0.85rem;
}

.mud-social-labelled a:hover .mud-social-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Tier card lists and the how-it-works steps — the default list indent sits
   too far left inside a card, and the markers are heavier than this palette
   wants. */
.mud-tier-list {
    padding-left: 1.1rem;
    margin-bottom: 1rem;
}

.mud-tier-list li {
    margin-bottom: 0.35rem;
}

.mud-steps {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.mud-steps li {
    margin-bottom: 0.75rem;
}

/* Form field errors — brick, matching what danger means everywhere else. */
.mud-field-error {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    color: var(--mud-danger);
    margin-top: 0.35rem;
}

/* Gallery teasers on the home page — unframed, so the photographs sit on the
   paper directly. Mixed portrait and landscape sources, so a fixed height
   plus cover keeps the row regular; the frame was doing that job before. */
.mud-teaser {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Cards sit on paper rather than on white — the fill would otherwise punch a
   bright hole in a palette that has no pure white in it. */
.mud-card {
    background-color: transparent;
    border-color: var(--mud-line);
}

/* Every button, wherever it comes from — the layout system's action buttons,
   a form submit, a marketing CTA. Without this the app's buttons fall back to
   Bootstrap's system stack while the page is set in Georgia, so the chrome and
   the content disagree. Buttons are controls, not prose: the sans is the
   point, and the weight stays moderate so a row of them doesn't shout. */
.btn {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
}

/* An input standing in a row of buttons takes their font too, or the two sit at
   different heights: same padding and size, different typeface, different line
   box. Weight stays normal — it is somewhere to type, not a control to press. */
.tag-widget-input {
    font-family: Arial, Helvetica, sans-serif;
}

/* btn-link is a link wearing button markup (the login page's "Forgot
   password?"). Bootstrap colors it its own blue, which the bare `a` rule
   above cannot reach, so it needs saying twice. */
.btn-link {
    color: var(--mud-link);
    font-weight: 400;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--mud-link-hover);
}

/* The marketing-page CTA — the one button that should carry weight, since
   it is asking for the click the page exists to get. Color comes from
   btn-action-primary, composed alongside it. */
.btn-mud {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------- action buttons */

/* common/css/buttons.css defines these as empty semantic classes that defer
   to the Bootstrap class composed alongside them, so an un-overriding site
   gets Bootstrap blue. That blue is the one color in the palette's opposite
   direction — cold against a warm, low-contrast range — so MUD claims them.

   Roles keep their MEANING, not Bootstrap's hues: primary is the committal
   action, danger still reads as a warning, and the two are told apart by
   depth rather than by hue, which suits a palette this narrow.

   Strong = committal (Save, Delete). Subtle = transitional (Cancel, Back).
   The -subtle variants sit on Bootstrap's outline classes, so they need a
   border and text color rather than a fill. */

.btn-action-primary,
.btn-action-secondary,
.btn-action-success {
    background-color: var(--mud-accent);
    border-color: var(--mud-accent);
    color: var(--mud-white);
}

.btn-action-primary:hover,
.btn-action-secondary:hover,
.btn-action-success:hover,
.btn-action-primary:focus,
.btn-action-secondary:focus,
.btn-action-success:focus {
    background-color: var(--mud-accent-dark);
    border-color: var(--mud-accent-dark);
    color: var(--mud-white);
}

/* Danger keeps a real warning color — a destructive button that looks like
   every other button is a usability problem, not a palette win. Muted toward
   brick so it belongs to the same earthy family. */
.btn-action-danger {
    background-color: var(--mud-danger);
    border-color: var(--mud-danger);
    color: var(--mud-white);
}

.btn-action-danger:hover,
.btn-action-danger:focus {
    background-color: var(--mud-danger-dark);
    border-color: var(--mud-danger-dark);
    color: var(--mud-white);
}

/* Nothing here for tag buttons: they are btn-action-danger-subtle and
   btn-action-success-subtle, which the rules above already theme. */

.btn-action-info {
    background-color: var(--mud-muted);
    border-color: var(--mud-muted);
    color: var(--mud-white);
}

/* Subtle variants — outline treatment: the color lives in border and text.

   ACCENT at rest, not grey. These were `--mud-line` bordered and `--mud-ink`
   lettered, so a quiet button said nothing about whose site it was until you
   hovered it — while danger-subtle wore its brick the whole time. The two
   halves of the tag widget made that plain: remove was brick at rest and add
   was grey, so they read as different kinds of thing when they are the same
   control in two roles.

   ⚠️ This is every quiet button on the manager side — Edit, New, Manage,
   Close, List, the manage arrows, the collapse chevron. Changed deliberately as
   a palette decision, not as a side effect of styling one widget. */
.btn-action-primary-subtle,
.btn-action-secondary-subtle,
.btn-action-success-subtle,
.btn-action-info-subtle {
    background-color: transparent;
    border-color: var(--mud-accent);
    color: var(--mud-accent);
}

.btn-action-primary-subtle:hover,
.btn-action-secondary-subtle:hover,
.btn-action-success-subtle:hover,
.btn-action-info-subtle:hover {
    background-color: var(--mud-accent);
    border-color: var(--mud-accent);
    color: var(--mud-white);
}

.btn-action-danger-subtle {
    background-color: transparent;
    border-color: var(--mud-danger);
    color: var(--mud-danger);
}

.btn-action-danger-subtle:hover,
.btn-action-danger-subtle:focus {
    background-color: var(--mud-danger);
    border-color: var(--mud-danger);
    color: var(--mud-white);
}

/* ---------------------------------------------------------------- footer */

/* Chrome appends post-message parts inside .container-fluid, which has
   horizontal padding. The olive band has to reach the viewport edges, so it
   pulls back out by that padding rather than the template moving. */
.mud-footer {
    background-color: var(--mud-accent);
    color: var(--mud-white);
    margin-top: 3rem;
    padding: 3rem 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.mud-footer a {
    color: var(--mud-white);
    text-decoration: none;
}

.mud-footer a:hover {
    text-decoration: underline;
}

/* The kicker's muted grey is tuned for cream; on olive it needs to lift. */
.mud-footer .mud-kicker {
    color: rgba(255, 250, 240, 0.75);
}

/* The date column of an event row. Day and time on separate lines so a time
   range never splits across a wrap — "7pm–" above "9pm" reads as two
   different things rather than one span. */
.mud-event-day,
.mud-event-time {
    display: block;
}
.mud-event-time {
    font-weight: 400;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

/* A cell of the gallery grid.

   The problem: portrait and landscape have to occupy IDENTICAL cells or the
   grid goes ragged. leslieelaine solves this with a fixed 230px box and an
   absolutely-positioned image centred by transform — it works, and has done
   in production for a decade, but the box cannot reflow.

   aspect-ratio does the same job declaratively and scales with the column, so
   the cell is square at every width instead of only at one. place-items
   replaces the translate trick.

   `contain`, never `cover`: cover crops to fill, which is right for a
   decorative band (.mud-teaser does exactly that) and wrong here, because
   cutting the rim off somebody's bowl misrepresents their work. */
.mud-gallery-cell {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background-color: var(--mud-paper, #f6f1e7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.mud-gallery-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.mud-gallery-cell:hover {
    border-color: rgba(0, 0, 0, 0.35);
}

/* The detail page's full image. No fixed box — here the image is the content
   rather than a cell in a grid, so it takes the width it is given and keeps
   its own proportions. */
.mud-gallery-full {
    width: 100%;
    height: auto;
}

/* The credit line. Quieter than the caption: it names who, and the work is
   what the visitor came for. */
.mud-gallery-credit {
    font-size: 0.875rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Tag clouds. The five weights come from how many images carry each tag,
   computed at render time rather than stored on the tag. */
.mud-tag-cloud a {
    display: inline-block;
    margin: 0 0.6rem 0.4rem 0;
    text-decoration: none;
}

.mud-tag-cloud a:hover {
    text-decoration: underline;
}

.mud-tag-weight-1 { font-size: 0.8rem; }
.mud-tag-weight-2 { font-size: 0.95rem; }
.mud-tag-weight-3 { font-size: 1.1rem; }
.mud-tag-weight-4 { font-size: 1.3rem; }
.mud-tag-weight-5 { font-size: 1.55rem; }

.mud-tag-group {
    margin-bottom: 2rem;
}