/* Layout — design tokens, the tile grid, the adapt grid and its column roles, and the
   visibility utilities. First of three contiguous pieces of what was one stylesheet:
   layout.css + base.css + components.css concatenate back to it byte for byte, and
   kisd_setup.php's dependency chain is what preserves that order. A rule moved between
   the files changes the cascade even though the bytes still add up. */
:root {
    --color-dark: #2a3944;
    --color-dark-deep: #202c34;
    --color-orange: #ea5a00;
    /* The orange tile's text sits on this rather than on --color-orange. 3% darker and 3.2
       degrees toward red, which keeps the brand's colourfulness (OKLCH C 0.196 vs 0.194) —
       darkening at the brand hue instead would lose chroma, because sRGB's gamut runs out
       there and red is far deeper. Deliberately short of AA at 4.01:1: the colour that
       clears 4.5 is #d54400, and it no longer reads as the brand orange. See plan.md. */
    --color-orange-dark: #e14c00;
    --color-violet: #b43092;
    --color-red: #c81e0f;
    --color-gray-light: #e7ecf0;
    --color-blue-gray: #c8d3dc;
    --color-gray-lighter: #ececec;
    --color-orange-red: #ff3f1e;
    --color-orange-red-dark: #ee482b;
    --color-red-light: #ee2d1c;
    --color-gray-medium: #d5d5d5;
    --color-green: #73a345;
    --color-magenta: #d032e3;
    --color-magenta-dark: #c013be;
    --color-gray-cool: #9aa1a6;
    --color-amber: #f0ad4e;
    --color-red-error: #cc0000;
    --color-near-black: #171f24;
    --color-blue-info: #6889cc;
    --color-red-dark: #99170b;
    --color-white: #ffffff;
    --color-slate: #3d5364;
    --color-gray-cool-dark: #7f888e;
    --color-amber-light: #f4c37d;
    --color-amber-dark: #ec971f;
    --color-blue-info-light: #8ea7d9;
    --color-blue-info-dark: #426bbf;
    --color-gray-border: #dfdfdf;
    --color-green-light: #8dbb60;
    --color-green-dark: #5a7f36;
    --color-invert: #18130f;
    --color-invert-light: #372c23;
    /* Shade over the top of a flat-colour tile, where its text sits, fading out before the
       bottom edge so the brand colour itself is still shown. It is what lets white text
       clear WCAG AA (4.5:1) on magenta and orange-red, which miss it flat, without darkening
       either. Text ends at 57% of the tile, hence the 60% stop. */
    --tile-text-scrim: linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.14) 60%, rgba(0, 0, 0, 0) 100%);
    /* Softens the edge of white text on a saturated ground. Legibility only — WCAG credits
       none of it, so every tile below still clears 4.5:1 on the background alone. */
    --tile-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    /* How far the photo-tile caption's veil dissolves upward, above the caption's own box.
       Its alpha is `--caption-scrim`, registered below. */
    --caption-fade: 120px;
    /* Slides the caption's veil down under the text, which does not move. Positive moves down,
       so the dissolve starts lower and the tile's `overflow: hidden` crops what leaves it. */
    --caption-drop: 50px;
    /* The chip: a tag rendered as a small glass square — the tile's kicker over a photo, the
       sidebar's tag menu over the white sidebar. Geometry only; the material is one rule in
       components.css and each ground overrides its four --chip-* colours there. */
    --chip-radius: 2px;
    --chip-padding: var(--space-5) var(--space-10);
    --space-lg: 24px;
    --space-md: 12px;
    --space-sm: 6px;
    --space-xs: 3px;
    --space-8: 8px;
    --space-2: 2px;
    --space-4: 4px;
    --space-5: 5px;
    --space-10: 10px;
    --space-14: 14px;
    --space-15: 15px;
    --space-20: 20px;
    --border-width: 1px
}
/* Registered, so hover can interpolate the photo-tile scrim: it is a number inside nine
   `rgba()` stops, and an unregistered custom property is a token substitution that cannot
   animate. `initial-value` is the token's default — there is no `:root` declaration. */
@property --caption-scrim {
    syntax: '<number>';
    inherits: true;
    initial-value: 0.56
}
/* Page transitions, CSS only. Both documents opt in here; the browser then cross-fades the
   page and morphs any pair of elements that share a view-transition-name across the
   navigation. `kisdde_view_transition_style()` puts one name on a post's tile and the same
   name on that post's top image, so a tile grows into the full picture. A browser without
   view transitions just navigates. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto
    }
}
::view-transition-group(root) {
    animation-duration: 250ms
}
/* The tile crop (349x276, and cropped again to the box's height) and the top image (up to
   1024x768) differ in aspect, and the default snapshot styling stretches one into the other.
   Filling the animating box and cropping instead is what makes it read as one photo growing;
   the tile's caption is part of its snapshot and cross-fades away as it grows. */
::view-transition-group(.tile) {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(.2, 0, 0, 1)
}
::view-transition-old(.tile),
::view-transition-new(.tile) {
    width: 100%;
    height: 100%;
    object-fit: cover
}
/* Tile grid, formerly isotope + packery (see grid.md). The library was reconstructing
   at runtime a layout the CSS already describes: a module grid of 1x1 and 2x2 tiles,
   three columns wide above 1440px, two down to 721px, one below. Tile size comes from
   the box's own adapt width class; row height from its aspect.
   grid.md argues against dense; the front page needs it. Its source order is runs of
   same-size tiles, so plain row placement leaves the third column empty for rows at a
   time. Uniform listings are all 1x1, where dense cannot reorder anything. */
#isotope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: var(--space-8);
    margin: 0
}
#isotope > .grid__column {
    width: auto;
    padding-left: 0
}
/* A thumbnail that 404s must leave an empty tile, not inflate the row. `sizes="auto"`
   gives a lazy image `contain: size` from the UA sheet, and with no natural size the UA
   then falls back to contain-intrinsic-size 3000x1500 — one broken image made a 276px
   tile 1500px tall. Naming the crop the theme requests (349x276) fixes that; `contain`
   itself is !important in the UA sheet and `aspect-ratio` loses to it, so this is the
   only property that bites. Isotope hid the problem by measuring once, before the lazy
   images loaded, and never re-measuring. */
#isotope .box img {
    width: 100%;
    height: auto;
    contain-intrinsic-size: 349px 276px
}
/* The same problem everywhere else, i.e. wherever the UA has not applied `contain`. A
   broken image is laid out as an inline *non-replaced* box around its alt text, so it
   ignores a specified height and grows on the inherited line box instead — a 60px glyph
   rendered 180px tall, a 46px avatar 132px tall. The class comes from the head listener in
   kisd_setup.php. `content` makes the element replaced again, so it drops the alt text and
   the broken-image icon and paints the placeholder itself; it then fills whatever box the
   container reserved, or falls back to the ratio of the crop the theme asks for — the same
   349x276 as above. `font-size`/`background` repeat that for browsers without `content` on
   an <img>. One class on purpose, so a rule that already sizes the tile still wins. */
.img--missing {
    display: block;
    height: 100%;
    aspect-ratio: 349 / 276;
    content: linear-gradient(var(--color-gray-light), var(--color-gray-light));
    font-size: 0;
    background: var(--color-gray-light)
}
/* The hero asks for 1024x768 instead. */
.topimage .img--missing {
    aspect-ratio: 4 / 3
}
/* No width class means full width in the adapt grid — e.g. the related headline. */
#isotope > .grid__column:not([class*="--"]) {
    grid-column: 1 / -1
}
@media screen and (width >= 721px) {
    #isotope > .grid__column:has(.box--2) {
        grid-row: span 2
    }
    #isotope > .col--tile-wide {
        grid-column: span 2;
        grid-row: span 2
    }
}
@media screen and (width >= 1441px) {
    #isotope {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}
@media screen and (width <= 720px) {
    #isotope {
        grid-template-columns: minmax(0, 1fr)
    }
}
@font-face {
    font-family: "FontAwesome";
    src: url("fonts/fontawesome.eot");
    src: url("fonts/fontawesome.eot?#iefix") format("embedded-opentype"), url("fonts/fontawesome.woff") format("woff"), url("fonts/fontawesome.ttf") format("truetype"), url("fonts/fontawesome.svg#fontawesome") format("svg");
    font-weight: normal;
    font-style: normal
}
.wrap--grid {
    max-width: 944px;
    margin: 0 auto;
    padding: 0 var(--space-8)
}
/* Columns are flex items. They used to be inline-block, which meant the whitespace
   between two of them rendered as a space — the parent set a blank webfont
   ("nowhitespace") to swallow it. Flex drops whitespace-only text nodes outright, so the
   font is gone. min-width: 0 keeps a percentage width honoured when the content is wider,
   the way inline-block did; align-items replaces vertical-align: top. */
.grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: -8px
}
.grid__column {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-family: "myriad-pro-semi-condensed", sans-serif;
    padding-left: var(--space-8)
}
.grid--gapless {
    padding-left: var(--space-8)
}
.grid--gapless .grid {
    padding-left: var(--space-8)
}
.grid--gapless .grid__column {
    padding: 0
}
.grid--center {
    justify-content: center;
    text-align: center
}
.grid--center .grid__column {
    text-align: left
}
.box  img, .topimage img
{
    width: 100%;
    height: auto
}

.content--only-text img, .content--with-head img {
    width: auto
}

/* Column roles. Every call site spelled its layout out breakpoint by breakpoint
   (desktop--third laptop--half tablet--half, ...); these name the role instead. The
   adapt width classes below stay because post content in the database uses them. */
@media only screen and (min-width: 481px) and (max-width: 1440px) {
    .col--tile {
        width: 50%
    }
    .col--centered {
        width: 80%
    }
}
@media screen and (width >= 977px) {
    .col--content {
        width: 75%
    }
    .col--sidebar {
        width: 25%
    }
}
@media screen and (width >= 1441px) {
    .col--tile {
        width: 33.33333%
    }
    .col--centered {
        width: 75%
    }
}
@media screen and (width <= 480px) {
    .col--centered {
        width: 90%
    }
}
@media screen and (width >= 1441px) {
    .wrap--grid {
        max-width: 1240px
    }
}
@media screen and (width >= 977px) {
    .laptop--eighty {
        width: 80%
    }
    .laptop--quarters {
        width: 75%
    }
    .laptop--half {
        width: 50%
    }
.laptop--third {
        width: 33.33333%
    }
    .laptop--quarter {
        width: 25%
    }
}
@media screen and (721px <= width <= 976px) {
    .wrap--grid {
        max-width: 704px
    }
}
@media screen and (481px <= width <= 976px) {
    .tablet--eighty {
        width: 80%
    }
    .tablet--half {
        width: 50%
    }
    .tablet--quarter {
        width: 25%
    }
}
@media screen and (width <= 480px) {
    .wrap--grid {
        max-width: 100%
    }
    .mobile--ninety {
        width: 90%
    }
}
@media screen and (width >= 1441px) {
    .desktop--ninety {
        width: 90%
    }
    .desktop--quarters {
        width: 75%
    }
    .desktop--half {
        width: 50%
    }
    .desktop--third {
        width: 33.33333%
    }
    .desktop--quarter {
        width: 25%
    }
}
.no-list {
    list-style: none;
    padding: 0;
    margin: 0
}
@media screen and (width >= 1441px) {
    .hide--desktop {
        display: none !important;
        visibility: hidden !important
    }
}
.hide {
    display: none;
    visibility: hidden
}
/* Off screen for the eye, still in the accessibility tree — for a label or heading the
   layout has no room for. `display: none` would hide it from screen readers too. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}
@media screen and (976px <= width <= 1441px) {
    .hide--laptop {
        display: none !important;
        visibility: hidden !important
    }
}
@media screen and (720px <= width <= 976px) {
    .hide--tablet-fluid {
        display: none !important;
        visibility: hidden !important
    }
}
@media screen and (480px <= width <= 720px) {
    .hide--tablet {
        display: none !important;
        visibility: hidden !important
    }
}
@media screen and (width <= 480px) {
    .hide--mobile {
        display: none !important;
        visibility: hidden !important
    }
}
.group:after {
    content: "";
    display: table;
    clear: both
}
.group .group__left {
    float: left
}
.group .group__right {
    float: right
}
.group>label {
    float: left;
    width: 35%;
    margin-top: var(--space-sm);
    text-align: right;
    margin-bottom: var(--space-lg)
}
.group>input {
    width: 69%;
    margin-right: 1%;
    margin-bottom: var(--space-lg);
    @media screen and (width <= 480px) {
        width: 59%
    }
}
.group>label+input,
.group>label+textarea {
    width: 65%;
    margin-right: 0
}
.group>select,
.group>input,
.group>textarea {
    float: left
}
.group>input+.button,
.group>input+input[type=submit] {
    width: 30%;
    vertical-align: bottom;
    margin: 0 0 var(--space-lg) 0;
    @media screen and (width <= 480px) {
        width: 40%
    }
}