/* ==========================================================================
   macathletix.com - responsive layer
   Loaded after publicstyle.css on every page of the flattened build.

   The CMS ships no responsive.css at all: mobile visitors were 302'd to a
   separate /mobile/ stub. So everything below the header down to the footer is
   laid out here for the first time, and a fair amount of it is NOT inside a
   media query - the desktop layout has hard 1200px table widths that overflow
   any window narrower than that, which is a bug at 1100px just as much as at
   400px.

   Order:
     1. tokens
     2. page frame            (base level - fixes desktop too)
     3. header + nav          (base level, with a <=900px branch)
     4. hero, tiles, footer   (base level)
     5. @media (max-width:900px)   the un-tabling
     6. @media (max-width:600px)   the tightening
   ========================================================================== */

:root {
  --mac-red: #b91328;
  --mac-red-dark: #8f0e1f;
  --mac-ink: #111111;
  --mac-line: #e2e2e2;
  --mac-body: #6f6f6f;
  --mac-max: 1200px;
  --mac-gutter: 20px;
  --mac-step: 40px;
  --mac-bar: 45px;   /* red utility bar   */
  --mac-head: 95px;  /* logo + nav bar    */
  --mac-display: "Blender Pro Medium", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mac-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   1. page frame
   The CMS pins .contentTable/.headerRow/.converterRow to width:1200px, so
   every window between 900px and 1200px scrolls sideways. Cap instead of pin,
   and put the page gutter on the table so the content never touches the edge.
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

.bigTable { width: 100%; }

.contentTable,
.headerRow,
.converterRow {
  width: 100% !important;
  max-width: calc(var(--mac-max) + var(--mac-gutter) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mac-gutter);
  padding-right: var(--mac-gutter);
}

/* The CMS wraps most content in <center>, which centres the text too. */
.homeCell center { text-align: left; }

/* Images inside content: never wider than their cell, and never stretched.
   FlexSite writes a fixed inline PAIR - style="width:464px;height:261px" - on
   its tiles, and capping only the width squashes the aspect ratio. Release the
   height with it. Scoped away from the header logo, the hero and the sponsor
   strip, which are all sized deliberately. */
.homeCell img,
.subFooter1Cell img,
.subFooter2Cell img,
.subFooter3Cell img:not(.macSponsors img) {
  max-width: 100%;
  height: auto !important;
}

/* Inner tables must not overflow their cell - but NOT .contentTable, which is
   the page's own 1200px column. `.homeCell table` (0,1,1) outranks
   `.contentTable` (0,1,0), so writing it without the :not() silently threw the
   max-width away and let every page but the homepage run the full window
   width. */
.homeCell table:not(.contentTable) { max-width: 100%; }

/* Long unbroken strings (URLs in the policy pages) must not widen the page. */
.homeCell td, .homeCell p, .homeCell li { overflow-wrap: break-word; }

.macSkip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--mac-red);
  color: #fff;
  padding: 12px 18px;
  font-family: var(--mac-display);
}
.macSkip:focus { left: 0; }

/* --------------------------------------------------------------------------
   2. header
   -------------------------------------------------------------------------- */
/* The CMS toggled a .fixed-pos class on .converter from a jQuery scroll
   handler, and .fixed-pos was position:fixed with no height reserved below it -
   so the bar detached and the page jumped by its own height. The row it lives
   in is a <tr>, and position:sticky does not apply to a table row, so the
   sticky element is the .converter div inside the cell. */
.header, .converter { width: 100%; }

.header {
  height: auto;
  background: var(--mac-red);
}

.converter {
  position: sticky;
  top: 0;
  z-index: 800;
}

/* z-index on a positioned .converter opens a stacking context, so the nav's
   own z-index:1200 is resolved INSIDE it - at 800 - and the backdrop (1100, a
   child of body) paints over the whole panel. Every tap on a menu item then
   hits the backdrop and closes the menu. Lift the header above the backdrop
   while the panel is open; the burger stays reachable to close it. */
html.macNavOpen .converter { z-index: 1300; }

.macBar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: calc(var(--mac-max) + var(--mac-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--mac-gutter);
  min-height: var(--mac-bar);
}

.macBar-phone,
.macBar-phone:link,
.macBar-phone:visited {
  font-family: var(--mac-display);
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
  padding: 12px 0;
  white-space: nowrap;
}
.macBar-phone:hover { color: #ffd9de; text-decoration: none; }

.macBar-btn,
.macBar-btn:link,
.macBar-btn:visited {
  font-family: var(--mac-display);
  font-size: 15px;
  letter-spacing: .04em;
  color: #fff;
  background: #000;
  text-decoration: none;
  padding: 13px 18px;
  white-space: nowrap;
  transition: background .15s;
}
.macBar-btn:hover { background: #2a2a2a; color: #fff; text-decoration: none; }
.macBar-btn--cta:hover { background: var(--mac-red-dark); }

.converter {
  height: auto;
  background: #fff;
  border-bottom: 2px solid #ccc;
}

.macHead {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: calc(var(--mac-max) + var(--mac-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--mac-gutter);
  min-height: var(--mac-head);
}

.macHead-logo { display: block; flex: 0 0 auto; line-height: 0; }
.macHead-logo img { display: block; width: 101px; height: 88px; }

/* --------------------------------------------------------------------------
   3. nav
   The CMS nav was a Telerik RadMenu whose root items were IMAGES and whose
   dropdowns needed Telerik's own script, which the flatten removes. This is a
   plain list; the mega panels open on hover and on click/keyboard alike.
   -------------------------------------------------------------------------- */
.macNav { margin-left: auto; }

.macNav-root {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.macNav-item { position: relative; margin: 0; }

.macNav-link,
.macNav-link:link,
.macNav-link:visited {
  display: block;
  font-family: var(--mac-display);
  font-size: 17px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mac-ink);
  text-decoration: none;
  padding: 12px 14px;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}

.macNav-link:hover,
.macNav-toggle[aria-expanded="true"] { color: var(--mac-red); text-decoration: none; }

.macNav-link[aria-current="page"] {
  color: var(--mac-red);
  box-shadow: inset 0 -3px 0 var(--mac-red);
}

.macNav-toggle { font: inherit; font-family: var(--mac-display); }

.macNav-caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 7px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.macMega {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 900;
  background: var(--mac-ink);
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  /* Projects lists 41 sites in three columns, which is 819px tall - more than
     a 900px-high window has left below a sticky header. Scroll the panel
     rather than let it run off the bottom of the screen. */
  max-height: calc(100vh - var(--mac-bar) - var(--mac-head) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.macMega[hidden] { display: none; }

.macMega-inner {
  display: flex;
  gap: 8px;
}

.macMega-col {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
  min-width: 250px;
}

.macMega-head {
  font-family: var(--mac-display);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  opacity: .55;
  margin: 14px 0 6px;
  padding: 0;
}
.macMega-col > .macMega-head:first-child { margin-top: 0; }

.macMega-li { margin: 0; }
.macMega-li.is-sub { padding-left: 16px; }

.macMega-li a,
.macMega-li a:link,
.macMega-li a:visited {
  display: block;
  font-family: var(--mac-sans);
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 2px;
}
.macMega-li a:hover,
.macMega-li a:focus-visible {
  background: var(--mac-red);
  color: #fff;
  text-decoration: none;
}
.macMega-li a[aria-current="page"] { color: #ff8b9a; }

/* Projects is a long list; keep it inside the viewport. */
#macMega3 .macMega-col { min-width: 265px; }

.macBurger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 40px;
  padding: 9px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.macBurger span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--mac-ink);
  transition: transform .2s, opacity .2s;
}
.macBurger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.macBurger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.macBurger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.macBackdrop { display: none; }

:focus-visible { outline: 3px solid var(--mac-red); outline-offset: 2px; }
.macMega :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   4. hero (replaces LayerSlider)
   -------------------------------------------------------------------------- */
.macHero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0d1116;
}

.macHero-bg {
  display: block;
  width: 100%;
  height: 550px;
  max-height: 46vw;
  min-height: 260px;
  object-fit: cover;
  object-position: 50% 50%;
}

.macHero-inner {
  position: absolute;
  inset: 0;
  max-width: var(--mac-max);
  margin: 0 auto;
  pointer-events: none;
}

.macHero-text {
  position: absolute;
  left: 0;
  top: 32%;
  width: 50.8%;   /* 610 of the CMS's 1200px layer container */
  max-width: 610px;
  height: auto;
}

.macHero-badge {
  position: absolute;
  left: 81%;      /* 972 of 1200 */
  top: 59%;
  width: 21.5%;   /* 258 of 1200 */
  max-width: 258px;
  pointer-events: auto;
}
.macHero-badge img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   5. homepage service tiles / ticker / sponsors / footer
   All three were built out of floats and fixed pixel widths.
   -------------------------------------------------------------------------- */
.subFooter1Row, .subFooter2Row, .subFooter3Row, .footerRow { height: auto; }
.subFooter1Cell, .subFooter2Cell, .subFooter3Cell, .footerCell { padding: 0; }

/* The five "SERVICE & MAINTENANCE / PLAYGROUND INSPECTIONS / ..." buttons. */
.macTiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 24px;
  margin: var(--mac-step) 0;
}
.macTiles > div {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  background: var(--mac-ink);
  transition: background .15s;
}
.macTiles > div:hover { background: #000; }
/* The artwork is 220x100 - exactly the tile width - and the CMS ran it flush
   to the top and sides with the caption directly under it. Capping it at 64px
   left each photo marooned in a field of black. */
.macTiles a,
.macTiles a:link,
.macTiles a:visited {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  padding: 0 0 10px;   /* the CMS had none at all; 10px stops the caption
                          sitting flush on the bottom edge */
  text-align: center;
  line-height: 1.25;
  text-decoration: none;
}
.macTiles img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-bottom: 10px;
}

/* The rich-HTML ticker: a 464px image floated beside its copy. */
.tickerstyle1000 { max-width: 100%; }
.messagediv1000 { overflow: hidden; }
.messagediv1000 img {
  max-width: 464px;
  width: 100%;
  height: auto !important;
}

.redButton {
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding: 15px 24px;
  font-family: var(--mac-display);
  letter-spacing: .05em;
  transition: background .15s;
}
.redButton:hover { background: var(--mac-red-dark); }

/* Sponsor strip - replaces a 1198px iframe running a pixel-positioned
   carousel. Two copies of the logo list slide past each other. */
/* The strip lives in a table cell, and a table cell is sized by its content's
   MIN-content width - so a max-content track 7,400px wide drags the whole
   .contentTable out to 7,400px and overflow:hidden never gets a chance. Two
   guards: the row's table is told to ignore its content, and the strip itself
   declares a zero base width so it contributes nothing to that measurement. */
.subFooter3Cell .contentTable { table-layout: fixed; }

.macSponsors {
  overflow: hidden;
  width: 0;
  min-width: 100%;
  margin: 0 0 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.macSponsors-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: macMarquee 70s linear infinite;
}
.macSponsors:hover .macSponsors-track,
.macSponsors:focus-within .macSponsors-track { animation-play-state: paused; }
.macSponsors img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  flex: 0 0 auto;
}
@keyframes macMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .macSponsors { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .macSponsors-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* Footer: four floated blocks. */
.footerCell .contentTable > tbody > tr > td { padding-top: 18px; padding-bottom: 18px; }
.macFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.macFooter > div {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.macFooter .macFooter-pay { display: flex; align-items: center; gap: 10px; }
.macFooter .macFooter-pay img { margin: 0 !important; }
.macFooter .macFooter-links { margin-left: auto !important; }
.macFooter .macFooter-social { line-height: 0; }
.macFooter .macFooter-social img { margin: 0 !important; }

/* --------------------------------------------------------------------------
   6. tablet / phone: un-table the layout
   A <table> will not render below its min-content width, and width:auto only
   makes it shrink to that same minimum - so every table in the content column
   has to become blocks before anything else can reflow.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --mac-head: 64px; --mac-step: 32px; }

  .macBurger { display: flex; }

  .macHead { gap: 12px; }
  .macHead-logo img { width: 66px; height: 58px; }

  .macBar { justify-content: space-between; gap: 8px; min-height: 44px; }
  /* publicstyle.css qualifies every link rule with :link/:visited (0,2,0), so
     a bare `.macBar-btn` override (0,1,0) loses even inside a media query -
     being later in the file does not help. Repeat the qualifiers. */
  .macBar-phone, .macBar-phone:link, .macBar-phone:visited {
    font-size: 16px;
    padding: 10px 0;
  }
  .macBar-btn, .macBar-btn:link, .macBar-btn:visited {
    font-size: 13px;
    padding: 10px 12px;
  }

  /* off-canvas panel */
  .macNav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 400px);
    z-index: 1200;
    margin: 0;
    background: var(--mac-ink);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 76px 0 40px;
    transform: translateX(100%);
    transition: transform .25s ease;
    visibility: hidden;
  }
  .macNav.is-open { transform: translateX(0); visibility: visible; }

  .macNav-root { display: block; }
  .macNav-item { border-bottom: 1px solid rgba(255, 255, 255, .12); }

  .macNav-link,
  .macNav-link:link,
  .macNav-link:visited {
    width: 100%;
    text-align: left;
    color: #fff;
    font-size: 18px;
    padding: 16px 22px;
  }
  .macNav-link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--mac-red); color: #fff; }
  .macNav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }

  .macNav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .macNav-caret {
    margin-left: 12px;
    border-top-width: 6px;
    border-left-width: 5px;
    border-right-width: 5px;
    transition: transform .2s;
  }
  .macNav-toggle[aria-expanded="true"] .macNav-caret { transform: rotate(180deg); }

  .macMega {
    position: static;
    box-shadow: none;
    background: rgba(0, 0, 0, .35);
    padding: 4px 0 12px;
  }
  .macMega-inner { display: block; }
  .macMega-col { min-width: 0; padding: 4px 22px; }
  #macMega3 .macMega-col { min-width: 0; }
  .macMega-li a { padding: 11px 8px; font-size: 16px; }
  .macMega-head { margin-top: 16px; }

  .macBackdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, .55);
  }
  .macBackdrop[hidden] { display: none; }

  html.macNavOpen, html.macNavOpen body { overflow: hidden; }

  /* --- un-table everything in the content column ------------------------ */
  .bigTable,
  .bigTable > tbody,
  .bigTable > tbody > tr,
  .bigTable > tbody > tr > td,
  .contentTable,
  .contentTable > tbody,
  .contentTable > tbody > tr,
  .contentTable > tbody > tr > td,
  .homeCell table,
  .homeCell tbody,
  .homeCell tr,
  .homeCell td,
  .subFooter1Cell table, .subFooter1Cell tbody, .subFooter1Cell tr, .subFooter1Cell td,
  .subFooter2Cell table, .subFooter2Cell tbody, .subFooter2Cell tr, .subFooter2Cell td,
  .subFooter3Cell table, .subFooter3Cell tbody, .subFooter3Cell tr, .subFooter3Cell td,
  .footerCell table, .footerCell tbody, .footerCell tr, .footerCell td {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: top;
  }

  /* The CMS insets its two-column layouts with 2%-wide rail cells and pads
     rows with &nbsp; cells. Un-tabled those become full-width empty blocks. */
  .homeCell td.macBlankCell { display: none !important; }

  .homeCell td { padding-left: 0 !important; padding-right: 0 !important; }
  .homeCell td + td { margin-top: 22px; }

  /* The CMS writes fixed pixel widths INLINE - style="width:325px" on the
     "Pro's Choice" button wrapper, style="width:220px" on the homepage tiles -
     and an inline style beats any stylesheet rule, so at 320px the button hung
     21px off the page. max-width does not need to out-specify the inline
     width: the used width is clamped by it either way, and clamping can only
     ever make a box narrower, so nothing else can be disturbed by this. */
  .homeCell [style*="width:"],
  .subFooter1Cell [style*="width:"],
  .subFooter2Cell [style*="width:"] { max-width: 100% !important; }

  /* Stacked columns need a rule between them, not beside them. */
  .homeCell td[style*="border-right"] {
    border-right: 0 !important;
  }

  .contentTable { padding-left: var(--mac-gutter); padding-right: var(--mac-gutter); }
  .homeCell .contentTable { padding-left: 0; padding-right: 0; }
  .homeCell { padding: 0 var(--mac-gutter); }

  .spacerRow, .spacerRow td { height: auto !important; }

  h1 { font-size: 34px; line-height: 1.1; }
  h2 { font-size: 25px; line-height: 1.15; }
  h3 { font-size: 22px; line-height: 1.2; }

  .macHero-bg { height: 340px; max-height: 60vw; min-height: 220px; }
  .macHero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 var(--mac-gutter);
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15));
  }
  .macHero-text,
  .macHero-badge {
    position: static;
    width: auto;
    max-width: 100%;
  }
  .macHero-text { max-width: min(420px, 78%); }
  .macHero-badge { width: 108px; }

  .macTiles { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

  /* The ticker's box is `width:900px; height:340px` from a <style> block
     inside the page itself, and .messagediv1000 is overflow:hidden - so once
     the image stops floating and stacks above the copy, the content is 439px
     tall and the last two lines are simply cut off. Let the box follow its
     content here. */
  .tickerstyle1000 {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .messagediv1000 { overflow: visible; }

  .messagediv1000 img {
    float: none !important;
    display: block;
    margin: 0 0 18px !important;
    width: 100% !important;
    max-width: none;
  }

  /* The un-tabling above turns every cell into a block, and .macTiles /
     .macFooter ARE cells - `.subFooter1Cell td` (0,1,1) outranks `.macTiles`
     (0,1,0), so their grid/flex layout is silently lost. Re-assert it with the
     cell in the selector. */
  .subFooter1Cell td.macTiles { display: grid; }
  .footerCell td.macFooter { display: flex; }

  .macFooter { flex-direction: column; align-items: flex-start; }
  .macFooter .macFooter-links { margin-left: 0 !important; }

  /* Galleries: the CMS emits bare <a><img></a> thumbnails in a run. */
  #vlightbox1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
  /* Two things pin these thumbnails at 160px. vlightbox1.css says
     `#vlightbox1 .vlightbox1 { width: 160px }` (1,1,0), which outranks a plain
     `#vlightbox1 a` (1,0,1) - so the selector has to carry the class too. And
     a grid item's default min-width is auto, i.e. its min-CONTENT width, so
     even at width:auto it would refuse to shrink into a 107px track and hang
     off the right of the page. */
  #vlightbox1 a.vlightbox1 {
    display: block;
    width: auto;
    min-width: 0;
    overflow: hidden;
  }
  #vlightbox1 a.vlightbox1 img { width: 100%; height: auto; display: block; }

  iframe { max-width: 100%; }
}

@media (max-width: 600px) {
  :root { --mac-gutter: 16px; --mac-step: 26px; }

  /* Two compact rows - the phone number, then both calls to action side by
     side. Kept tight on purpose: this bar plus the logo bar is everything
     between the top of a 812px-tall phone screen and the page itself. */
  .macBar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    padding: 0;
    min-height: 0;
  }
  .macBar-phone, .macBar-phone:link, .macBar-phone:visited {
    margin-right: 0;
    width: 100%;
    text-align: center;
    padding: 6px 0;
    font-size: 17px;
  }
  .macBar-btn, .macBar-btn:link, .macBar-btn:visited {
    flex: 1 1 0;
    text-align: center;
    font-size: 13px;
    padding: 9px 6px;
    line-height: 18px;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 22px; }

  .macHero-bg { height: 260px; max-height: 68vw; }
  .macHero-badge { width: 88px; }

  .macTiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .macTiles a { padding: 18px 8px; font-size: 15px; }

  .redButton { width: 100%; min-width: 0; }

  #vlightbox1 { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* ==========================================================================
   7. forms
   Both CMS forms lived in a fixed-size <iframe> (535x725 and 705x725) running
   Telerik RadInput controls; fp_forms.py replaces each with a real inline
   <form>. These styles are the whole of their appearance.
   ========================================================================== */
/* The panel is only ever as wide as the form it holds. Left to itself it
   stretched the full 1200px column with 560px of empty grey to the right of
   the fields. */
.macFormBox {
  background: #f2f2f2;
  padding: 24px;
  text-align: left;
  max-width: 828px;      /* .macFormWrap 780 + 2x24 padding */
  margin-left: auto;
  margin-right: auto;
}

.macFormWrap { max-width: 780px; }
.macForm { font-family: var(--mac-sans); }

/* Honeypot. Kept in the layout tree - a display:none control is not submitted
   by some older browsers - but pushed out of sight and out of the tab order. */
.macHp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.macFields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 20px;
  align-items: start;
}

.macRow { display: block; min-width: 0; }
.macRow--wide { grid-column: 1 / -1; }

.macRow > label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mac-display);
  font-size: 16px;
  line-height: 1.35;
  color: #222;
}

.macReq { color: var(--mac-red); text-decoration: none; border: 0; font-weight: 700; }

.macForm input[type="text"],
.macForm input[type="email"],
.macForm input[type="tel"],
.macForm input[type="file"],
.macForm select,
.macForm textarea {
  /* border-box, because every one of these is width:100% with padding */
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  background: #fff;
  font-family: var(--mac-sans);
  font-size: 16px;   /* 16px, or iOS Safari zooms the page on focus */
  line-height: 1.4;
  color: #222;
}
.macForm textarea { min-height: 150px; resize: vertical; }
.macForm select { height: 46px; }

.macForm input:focus,
.macForm select:focus,
.macForm textarea:focus {
  border-color: var(--mac-red);
  outline: 2px solid rgba(185, 19, 40, .3);
  outline-offset: 0;
}

.macHint { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: #777; }

.macSubmit { margin-top: 24px; }

.macBtn {
  display: inline-block;
  min-width: 200px;
  min-height: 48px;
  padding: 13px 28px;
  border: 0;
  background: var(--mac-red);
  font-family: var(--mac-display);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease;
}
.macBtn:hover, .macBtn:focus { background: var(--mac-red-dark); }

.macMsg {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-left: 4px solid;
  font-family: var(--mac-sans);
  font-size: 16px;
  line-height: 1.5;
}
.macMsgOk { border-color: #1f8a4c; background: #eef8f2; color: #17552f; }
.macMsgErr { border-color: var(--mac-red); background: #fdeeec; color: #8a281c; }

/* Lightbox thumbnails were bare <img onclick>; fp_polish wraps each in a
   button, which must not look like one. */
.macLightbox {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}
.macLightbox img { display: block; }

.macPostNav {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--mac-display);
  letter-spacing: .04em;
  text-decoration: none;
}
.macPostNav.is-disabled { opacity: .4; }

@media (max-width: 600px) {
  .macFormBox { padding: 16px; }
  .macFields { grid-template-columns: minmax(0, 1fr); }
  .macBtn { width: 100%; min-width: 0; }
}

/* ==========================================================================
   8. blog
   The sidebar was three Telerik controls that all died with the postback: a
   RadInput "Quick Search", a RadTreeView of post titles rendered as bare
   <span>s and truncated mid-word, and a RadTagCloud whose "tags" were the most
   frequent words in the posts ("are", "that", "you") linked to
   javascript:void(0). fp_polish rebuilds the first two and drops the third.
   ========================================================================== */
.macBlogSearch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  max-width: 320px;
}
.macBlogSearch label {
  flex: 1 0 100%;
  font-family: var(--mac-display);
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
.macBlogSearch input[type="search"] {
  flex: 1 1 150px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #c9c9c9;
  font-family: var(--mac-sans);
  font-size: 16px;
}
.macBlogSearch button {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 0;
  background: var(--mac-red);
  color: #fff;
  font-family: var(--mac-display);
  font-size: 15px;
  cursor: pointer;
}
.macBlogSearch button:hover { background: var(--mac-red-dark); }

.macBlogList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 320px;
}
.macBlogList li {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #e6e6e6;
  font-size: 15px;
  line-height: 1.35;
}
.macBlogList li:last-child { border-bottom: 0; }
.macBlogList a { text-decoration: none; }
.macBlogList a:hover { text-decoration: underline; }
.macBlogList a[aria-current="page"] { color: #333; font-weight: bold; }
.macBlogDate {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-style: italic;
  color: #8a8a8a;
}

.macShare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.macShare-label {
  font-family: var(--mac-display);
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.macShare a { font-size: 15px; text-decoration: none; }
.macShare a:hover { text-decoration: underline; }


/* The CMS gives the blog sidebar a 100px cell and lets it overflow. Give it a
   real column so the post titles are not one word per line. */
.macBlogSidebar { width: 300px !important; }

/* The blog's two-column layout: article + sidebar. It is a table, so it stacks
   with everything else under 900px - but the sidebar's own float has to go
   with it, or it sits half off the page. */
@media (max-width: 900px) {
  .homeCell div[style*="float: right"],
  .homeCell div[style*="float:right"] { float: none !important; }
  .macBlogList, .macBlogSearch { max-width: none; }
}