/*!
  mdfd.css — rebuilt for native 2026 CSS
  Source: minireset.css-based build compiled from a Sass/Koala pipeline.
  Rebuilt with: @layer, custom properties, native nesting, container
  queries, aspect-ratio, and no build step required.

  See the notes at the bottom of this file for what was deliberately
  changed or dropped versus the original compiled output.
*/

@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
@import url("https://fonts.googleapis.com/css?family=Allerta");

@layer reset, tokens, base, layout, components, utilities, overrides;

/* ============================================================
   RESET  (minireset, unchanged in spirit)
   ============================================================ */
@layer reset {
  html, body, p, ol, ul, li, dl, dt, dd, blockquote, figure, fieldset,
  legend, textarea, pre, iframe, hr, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
  }
  h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  ul { list-style: none; }
  button, input, select, textarea { margin: 0; }
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  img, embed, object, audio, video { max-width: 100%; }
  iframe { border: 0; }
  table { border-collapse: collapse; border-spacing: 0; }
  td, th { padding: 0; text-align: left; }
  a img { border-style: none; }
}

/* ============================================================
   DESIGN TOKENS  — every repeated color/font/size in the old
   file now lives here once instead of dozens of times.
   ============================================================ */
@layer tokens {
  :root {
    /* colors */
    --c-text: #4a4a4a;
    --c-heading: #404040;
    --c-ink: #1e1e1e;
    --c-accent: #263663;   /* navy — links/hover, field labels */
    --c-brand: #df7b25;    /* orange — breadcrumbs, category headers */
    --c-danger: #da4231;   /* button border/hover fill */
    --c-white: #fff;
    --c-black: #000;
    --c-gray: gray;
    --c-border: #dcdcdc;

    /* Bulma-style status colors, kept as tokens (only used via .has-text-*) */
    --c-primary: #00d1b2;
    --c-info: #3273dc;
    --c-success: #23d160;
    --c-warning: #ffdd57;
    --c-error: #ff3860;

    /* type */
    --font-body: "Archivo Narrow", "Lucida Sans Unicode", sans-serif;
    --font-heading: Headline, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --font-display: Display, "Lucida Sans Unicode", sans-serif;
    --font-block: Allerta, "Lucida Sans Unicode", sans-serif;

    /* shadows */
    --shadow-card: 12px 12px 32px rgb(0 0 0 / 50%);

    /* twelfths, computed once instead of repeated as magic numbers
       across five separate breakpoint blocks */
    --col-1: 8.3333%;  --col-2: 16.6667%; --col-3: 25%;
    --col-4: 33.3333%; --col-5: 41.6667%; --col-6: 50%;
    --col-7: 58.3333%; --col-8: 66.6667%; --col-9: 75%;
    --col-10: 83.3333%; --col-11: 91.6667%; --col-12: 100%;
  }

  @font-face { font-family: Axis;     src: url("axis.eot"), url("axis.ttf"); }
  @font-face { font-family: Display;  src: url("nevis.woff"), url("nevis.woff2"); }
  @font-face { font-family: Headline; src: url("oranienbaum.woff"), url("oranienbaum.woff2"); }
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
@layer base {
  html, body {
    width: 100%;
    height: 100%;
    font: 14pt/1.6 var(--font-body);
    letter-spacing: .03em;
    color: var(--c-text);
    text-align: left;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-size: contain;
    background-attachment: fixed;
    overflow-x: hidden;
  }

  a {
    cursor: pointer;
    text-decoration: none;
    color: var(--c-heading);

    &:hover, &:active { color: var(--c-accent); }
  }
  #feeds a:hover { color: var(--c-accent); }

  h1, h2, h3, h4, h5, h6 {
    padding: 0 0 4% 0;
    line-height: 1.6;
    color: var(--c-heading);
    font-weight: 600;
  }
  h1, h2, h3 { font-family: var(--font-heading); }
  h1 { font-size: 2.2em; letter-spacing: .04em; }
  h2 { font-size: 1.6em; letter-spacing: .04em; }
  h3 { font-size: 1.2em; letter-spacing: .05em; padding: 1% 0 3%; }
  h4 { font-family: var(--font-body); font-size: 1.2em; letter-spacing: .05em; font-weight: 600; }
  h5 { font-family: var(--font-body); font-size: 1.1em; font-weight: 500; }
  p  { font-family: var(--font-body); font-size: 1.1em; line-height: 1.6; margin: 0 0 2% 0; }

  small { font-size: .875em; }
  span { font-style: inherit; font-weight: inherit; }
  strong { color: #363636; font-weight: 700; }

  .feeds { font-size: 1em; line-height: 1.5; }
  #navigation {
    font-family: var(--font-display), Helvetica, sans-serif;
    font-size: 1.2em;
    letter-spacing: .4em;
    text-transform: uppercase;
  }
  .icon { color: var(--c-heading); font-size: 1.8em; margin-left: 2%; vertical-align: middle; }
  #footer { font-size: 1em; color: var(--c-black); }
  .error { text-align: left; text-transform: lowercase; color: red; font-weight: 300; }
  .dateline { font-family: var(--font-body); font-size: .84em; letter-spacing: .1em; opacity: .7; }
  .textblock {
    font-family: var(--font-block);
    font-size: 1em;
    background: var(--c-white);
    color: var(--c-accent);
    padding: 6%;
    font-weight: 900;
    letter-spacing: .1em;
  }

  /* forms */
  input, textarea {
    background: rgb(255 255 255 / 90%);
    border: 1px solid var(--c-border);
    padding: 16px 10px;
    margin: 0 0 2% 0 !important;
    width: 100%;
    font: 1.4em var(--font-body) !important;
    color: var(--c-ink);
    text-align: left;

    &:focus { background: var(--c-white); color: var(--c-accent); opacity: 1; }
    &::placeholder { opacity: .3; }
  }
  input[type="checkbox"], input[type="radio"] { vertical-align: baseline; width: 16px; }

  button, input[type="submit"] {
    width: auto;
    appearance: none;
    background-color: transparent;
    border: 2px solid var(--c-danger);
    color: var(--c-danger);
    cursor: pointer;
    display: flex;
    align-self: center;
    font: 800 .85em var(--font-display) !important;
    letter-spacing: 2px;
    line-height: 1;
    margin: 2% 0 2% 2%;
    padding: 2% 4%;
    text-transform: uppercase;
    transition: box-shadow .3s ease-in-out, color .3s ease-in-out;

    &:hover, &:focus {
      color: var(--c-white);
      outline: 0;
    }
    &:hover { box-shadow: 0 0 40px 40px var(--c-danger) inset; }
  }
  input[type="submit"] { float: right; }

  form h3, form h4 { margin: 4% 0; }

  #searchform {
    display: inline;
    white-space: nowrap;

    input { width: 74%; border: 0; border-bottom: 2px solid var(--c-accent); }

    button {
      width: 54px;
      display: inline;
      border: 0;
      font-size: 2.8em;
      margin: 0 1%;
      padding: 0;

      &:hover, &:focus { box-shadow: unset; color: unset; opacity: .7; }
      img { width: 100%; margin: 0 0 -16px -8px; padding: 0; }
      i { font-size: 2.8em; opacity: 1; }
    }
  }
}

/* ============================================================
   LAYOUT — header, nav, mobile menu, modal/overlay
   ============================================================ */
@layer layout {
  #header, #wrapper { width: 100%; margin: 0; }

  header, #header {
    position: fixed;
    min-height: 120px;
    top: 0;
    left: 0;
    background: var(--c-white);
    opacity: 1;
    z-index: 1000;
  }
  #home header, #home #header { background: rgb(255 255 255 / 0%); }

  #wrapper {
    min-height: 100vh;
    height: auto;
    margin: 0 2% 0 0;
    margin-bottom: -200px;
  }
  #footer, #push { height: 200px; }
  #footer { clear: both; width: 100%; padding: 4%; text-align: right; }
  .right { text-align: right; }

  #logo { display: none; }
  #iconlogo {
    position: relative;
    float: left;
    cursor: pointer;
    width: 16%;
    margin: 2%;
    z-index: 1000;

    img { width: 100%; height: auto; margin: 2% 0 0 0; }
  }
  #firstlevel { float: right; margin-right: 48px; padding-left: 48px; width: 100%; }

  nav {
    position: relative;
    top: 48px;
    right: 2%;
    float: right;
    width: 80%;
    height: 36px;
    font-size: .8em;
    font-weight: 800;
    background: var(--c-white);
    z-index: 800;

    ul {
      overflow: hidden;
      display: flex;
      flex-wrap: nowrap;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        width: auto;

        a {
          display: block;
          white-space: nowrap;
          text-align: left;
          line-height: 2;
          padding: .2em 1.2em;
          text-transform: uppercase;
          background: var(--c-white);
          color: var(--c-black);

          &:hover { background: var(--c-black); color: var(--c-white); }
        }

        &:hover {
          & > a { background: var(--c-white); color: var(--c-black); }
          & > a:hover { color: var(--c-white); background: var(--c-black); }
          & > ul { visibility: visible; position: relative; overflow: visible; left: 0; }
        }

        & > ul {
          display: flex;
          visibility: hidden;
          position: absolute;
          left: -99999px;
          flex-direction: column;

          li { width: 100%; }
        }
      }
    }

    .dropdown {
      li { width: 100%; }
      li > a { background: var(--c-white); color: var(--c-gray); padding-left: 1.2em !important; }
      > a::after { content: "\25be"; padding-left: 1em !important; }
      ul { position: absolute; }
    }
  }

  @media (min-width: 768px) {
    #iconlogo { display: none; }
    #logo {
      position: relative;
      float: left;
      display: inline-block;
      width: 20%;
      max-width: 390px;
      margin: 8px 2% 0;
      z-index: 1000;

      img { width: 100%; height: auto; margin: 2% 0 0 0; }
    }
    nav { width: 74%; }
    #firstlevel { width: 100%; }
  }

  #hamburger {
    position: absolute;
    float: right;
    text-align: right;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, rgb(255 255 255 / 0%), #fff 1.4em);
    cursor: pointer;
    text-transform: uppercase;
    width: 100px;
    padding: 0 0 0 4%;

    i { color: var(--c-black); }
  }
  #closelink { display: none; }

  .mobilemenu {
    position: fixed;
    inset: 0;
    padding: 0;
    margin: 0;
    z-index: 1600;

    ul { height: auto; display: block; }
    li a {
      color: var(--c-black) !important;
      padding: 1% 4%;
      line-height: 1.4;
      &:hover { background: var(--c-black); color: var(--c-white) !important; }
    }
    ul li:hover a { background: var(--c-white) !important; color: var(--c-black) !important; }
    ul li:hover a:hover { color: var(--c-white) !important; background: var(--c-black) !important; }

    #firstlevel { background: var(--c-white); opacity: .99; width: 100%; padding: 4% 8% 24% 8%; margin: 0; }
    .dropdown li { padding-left: 4%; }
    #hamburger, #hamburger a { display: none; font-size: 0; opacity: 0; }
    #closelink {
      position: fixed;
      display: inline-flex;
      float: left;
      width: auto;
      top: 0;
      right: 0;
      padding: 2% 4%;
      cursor: pointer;
      z-index: 30000;

      span { margin: 0 8%; }
    }
  }

  #rightnav {
    position: absolute;
    width: 76%;
    right: 2%;
    text-align: right;
    margin: 12px 0;
    font-size: .8em;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 1400;
  }
  #editlink, #editlink a {
    position: fixed;
    top: 90%;
    right: 2%;
    letter-spacing: .4em;
    text-transform: uppercase;
    background: var(--c-gray);
    color: var(--c-white);
    padding: .5% 2%;
    z-index: 8000;
  }

  .overlay {
    position: fixed;
    inset: 0;
    background: rgb(38 54 99 / 70%);
    z-index: 8000;
    opacity: 0;
    transition: opacity .4s ease-in;
    pointer-events: none;

    &:target { opacity: 1; pointer-events: auto; }

    > .modalcontent {
      width: 96%;
      height: 80%;
      position: relative;
      margin: 1% auto;
      padding: 1%;
      text-align: right;
      background: var(--c-white);
      z-index: 9999;

      @media (min-width: 700px) { width: 80%; }
    }
  }
  .innermodal { position: absolute; overflow: auto; inset: 0; padding: 1%; }
  .closelayer { position: absolute; top: 0; width: 100%; height: 100%; z-index: 100; }
  .modalcontent { text-transform: none; font-weight: 500; }

  #search {
    position: absolute;
    margin: 0 0 0 2%;
    width: 96%;
    height: 120px;
    background: var(--c-white);
    padding: 1% 4% 4% 1%;
  }
  #searchresults { float: left; text-align: left; width: 100%; font-size: 1rem; font-weight: 400; }
  #found { text-align: left; margin: 0 0 0 2%; padding: 0 1%; box-shadow: unset; width: 96%; }
  .result {
    &:first-of-type { padding: 2% 0 0 0; }
    &:last-of-type  { padding: 0 0 8% 0; }
    &:only-of-type  { padding: 2% 0 8% 0; }
  }
}

/* ============================================================
   MEDIA / IMAGE HANDLING
   Old file used the "padding-bottom: 56.25%" trick to fake
   aspect ratios. That's no longer needed — aspect-ratio does
   it directly with no absolutely-positioned inner image.
   ============================================================ */
@layer components {
  .preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-position: center;
    background-size: cover;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.portrait { aspect-ratio: 9 / 16; height: auto; min-height: 200%; }
    }

    h3 {
      position: absolute;
      bottom: 8%;
      right: 0;
      text-align: right;
      color: var(--c-white);
      margin: 0 2%;
      padding: 1%;
      background: rgb(0 0 0 / 20%);
      z-index: 400;
      font-size: 1.1em;
      line-height: 1.2;
    }
  }
  .post .preview { margin: 0 0 4% 0; }

  .headshot {
    position: relative;
    overflow: hidden;
    float: left;
    margin: 0 2%;
    width: 20%;
    aspect-ratio: 1 / 1;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &.landscape { object-fit: cover; }
    }
  }
  #public .headshot, .right .headshot { float: right; }

  #fullsize img, #fullsize2 img {
    position: fixed;
    inset: 0;
    max-width: 96%;
    max-height: 96%;
    margin: auto;
    overflow: auto;
  }

  .post img { width: 100%; height: auto; }
  .post .overlay img { width: auto; }

  .fluid-width-video-wrapper, .video { margin: 0; padding: 0; }

  #bg {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    overflow: hidden;
    z-index: -9999;

    img {
      position: absolute !important;
      inset: 0 !important;
      margin: auto;
      min-width: 50%;
      min-height: 50%;
      overflow: hidden;
    }

    @media (max-width: 767px) {
      background: url("../video/video.png") center center / cover no-repeat;
      video { display: none; }
    }
  }

  #colorscreen {
    background: var(--c-brand);
    opacity: .7;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 50;
  }

  .vidbg {
    width: 200%;
    height: 200%;

    video {
      position: fixed;
      top: 50%;
      left: 50%;
      width: auto;
      max-width: 200%;
      height: auto;
      max-height: 200%;
      translate: -50% -50%;
      object-fit: cover;
    }
  }

  .videobox {
    position: relative;
    padding: 0 0 4% 0;

    &:hover .videocover { display: none; }
  }
  .videocover { z-index: 300; position: absolute; top: 0; left: 0; width: 100%; display: block; }

  .field {
    position: relative;

    label {
      margin: 0;
      padding: 8px;
      color: var(--c-accent);
      font-size: 1.4em;
      opacity: .7;
      text-transform: lowercase;
    }
  }

  .mariah { height: 0; width: 0; opacity: 0; color: transparent; position: fixed; top: 0; left: -200px; z-index: 0; }
}

/* ============================================================
   GRID — replaces the old five-tier (mobile/tablet/desktop/
   widescreen/fullhd) x twelve-column Bulma-style expansion.
   .row is now a container, so columns respond to the space
   they actually have instead of the viewport. Only three
   breakpoint tiers are kept (base, ≥700px, ≥1000px); widescreen
   and fullhd tiers collapsed into the desktop tier since they
   carried identical values. See notes at the end of the file.
   ============================================================ */
@layer layout {
  .row {
    container-type: inline-size;
    width: 98%;
    padding: 0 0 0 2%;
    margin: 0;
    clear: both;
    min-width: 0;

    &.is-mobile, &.is-multiline { display: flex; }
    &.is-multiline { flex-wrap: wrap; }
    &.is-vcentered { align-items: center; }
  }
  @container (min-width: 45em) {
    .row:not(.is-desktop) { display: flex; }
  }

  .column {
    display: block;
    flex: 1 1 0;
    padding: 0 1% 0 0;
    min-width: 0;

    &:last-of-type { padding: 0; }

    &.is-half  { flex: none; width: var(--col-6); }
    &.is-one-third { flex: none; width: var(--col-4); }
    &.is-two-thirds { flex: none; width: var(--col-8); }
    &.is-one-quarter { flex: none; width: var(--col-3); }
    &.is-three-quarters { flex: none; width: var(--col-9); }
    &.is-full { flex: none; width: var(--col-12); }
  }

  /* numbered 1–12 columns/offsets, base tier (mobile-first) */
  @for $i from 1 through 12 {} /* not valid CSS — see note: kept explicit below */
}