/* Modern accessibility, responsive design and archived-component replacements. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #dedede; background: #070707; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
body, #wrap { overflow-wrap: anywhere; }
#wrap, #header, .headercenter, #navbar, #nav, main, #contentleft, #contentleft_single, #contentwide, #contentwide_gallery, #contenthome { max-width: 100%; }
#wrap, #header, #navbar, main { width: min(960px, 100%); }
#header .headercenter { width: 100%; }
#header #title a { width: 100%; max-width: 960px; background-image: url("/wp-content/uploads/2010/06/logo.png"); background-size: contain; background-position: center; }
#navbar { height: auto; min-height: 40px; display: flow-root; }
#nav, #navbarleft, #navbarright { margin: 0; }
#nav { display: flow-root; }
#nav .ot-menu a { min-height: 40px; }
.ot-menu li:focus-within > ul { left: 0; top: 40px; z-index: 99; }
.ot-menu li li:focus-within > ul { left: 120px; top: 0; }
main.site-content { width: min(960px, 100%); overflow: clip; }
main.site-home { width: min(960px, 100%); }
#contentleft, #contentleft_single { max-width: 75%; }
#contentwide_gallery { width: 100%; }
img { max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }
a { text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 3px solid #ff638c !important; outline-offset: 2px; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1000; padding: .7rem 1rem; background: #fff; color: #111; }
.skip-link:focus { top: .5rem; }
.archive-status { color: #aaa; font-size: .82rem; padding: 0 1rem 1rem; clear: both; }
.archive-intro, .archive-notice { background: #181818; border-left: 3px solid #d76082; padding: .85rem 1rem; line-height: 1.55; }
.archive-intro { margin: 0 0 1rem; clear: both; }
.archive-notice { color: #d4d4d4; margin: .8rem 0 1.2rem; }
.unavailable-link { color: #888; text-decoration: none; cursor: not-allowed; }
#homepagetop { text-indent: 0; width: 100%; height: auto; float: none; margin: 0 0 1.5rem; }
.anythingSlider { position: relative; width: 100%; }
.anythingSlider .wrapper { overflow: hidden; width: 100%; height: auto; }
.anythingSlider .archive-slides { padding: 0; margin: 0; width: 100%; list-style: none; }
.anythingSlider .archive-slides li { margin: 0; padding: 0; width: 100%; float: none; }
.anythingSlider .archive-slides li[hidden] { display: none !important; }
.anythingSlider .archive-slides img { width: 100%; height: auto; display: block; object-fit: cover; }
.archive-slider-controls { display: flex; justify-content: center; gap: 1rem; align-items: center; padding: .6rem; }
.archive-slider-controls button { cursor: pointer; color: #fff; background: #242424; border: 1px solid #888; border-radius: 4px; padding: .3rem .75rem; font: inherit; }
.archive-slider-controls button:hover { background: #343434; }
#homepage_rowA, #homepage_rowB { width: 100%; }
#homepage_rowA { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; }
#homepage_rowA > div { width: calc(25% - .6rem); float: none; margin: 0; }
#homepage_rowA .homebox, #homepage_rowA .homebox img { max-width: 100%; width: 100%; height: auto; }
#homepage_rowB { display: flex; flex-wrap: wrap; gap: 1rem; }
#homepage_rowB > div { max-width: 100%; }
.portfolio, .portfolio_gallery { max-width: 100%; }
.portfolio_gallery { min-height: auto; }
.postarea { max-width: 100%; }
.postarea p { line-height: 1.6; }
.postarea table { display: block; overflow-x: auto; max-width: 100%; }
#breadcrumbs { line-height: 1.5; margin: 0 0 1.5rem; }
#footer { clear: both; }
@media (max-width: 780px) {
  #wrap { padding-inline: 1rem; }
  #header { height: clamp(65px, 11vw, 100px); }
  #header #title a { height: clamp(65px, 11vw, 100px); }
  #navbar { margin-bottom: 1rem; padding: .3rem; background: #171717; }
  #nav, #navbarleft, #navbarright { display: block; width: 100%; float: none; }
  #nav .ot-menu { display: flex; flex-wrap: wrap; float: none; }
  .ot-menu li { float: none; }
  .ot-menu a { padding: .5rem .65rem; }
  .ot-menu ul, .ot-menu li:hover ul, .ot-menu li:focus-within ul { top: auto; left: 0; }
  .ot-menu ul { position: absolute; min-width: 170px; background: #171717; }
  #contentleft, #contentleft_single, #sidebar_single, #contentwide, #contentwide_gallery { float: none; width: 100%; max-width: 100%; }
  #homepage_rowA > div { width: calc(50% - .5rem); }
  #homepage_rowB > div, .homepagebox_latestnews, .homepagebox_currentprojects, .homepagebox_extras { width: 100%; float: none; }
  .portfolio, .portfolio_gallery { float: none; width: 100%; }
  .newstitle, .archivetitle, .currentprojectstitle, .newstitle p, .archivetitle p, .currentprojectstitle p { max-width: 100%; width: auto; }
  #content { line-height: 1.6; }
}
@media (max-width: 420px) {
  #homepage_rowA > div { width: 100%; }
  #nav .ot-menu { gap: .1rem; }
  .ot-menu a { font-size: .8rem; padding: .45rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Make the English-language editorial feature part of the permanent site menu. */
#nav .menu-item-feature > a { color: #e5b0c2; white-space: nowrap; }
#nav .menu-item-feature > a:hover,
#nav .menu-item-feature > a:focus-visible,
#nav .menu-item-feature.current_page_item > a { color: #fff; }
@media (max-width:780px) {
  #nav .ot-menu > li > a { white-space: nowrap; }
  #nav .menu-item-feature > a { color: #f0a5bd; }
}


/* GLOBAL VISIBILITY FIX (2026-10-29): every archived template uses floated
   content blocks. overflow:clip does not create a float-containing block,
   leaving the parent main at zero height on single articles and gallery pages.
   The footer then paints over/clips the content. Contain floats on EVERY main,
   not only the retrospective Heard vs Depp article. */
#main-content.site-content,
#main-content.site-home {
  display: flow-root;
  overflow: visible;
  min-height: 1px;
}
/* Keep original dark palette but make supporting archive text legible. */
#main-content .newstitle p,
#main-content .archivetitle p,
#main-content .currentprojectstitle p { color: #b8b8b8; }
#breadcrumbs { color: #aaa; }
#footer {
  box-sizing: border-box;
  width: min(960px, 100%);
  max-width: 100%;
  height: auto;
  min-height: 80px;
  padding-bottom: 14px;
}
#footer p, #footer .archive-status, #footer .footertop { color: #aaa; }
@media (max-width: 780px) {
  #main-content.site-content,
  #main-content.site-home { overflow: visible; }
  #footer .footertop { max-width: calc(100% - 30px); }
}

/* Legacy pagination and category footers had fixed 960px/720px widths.
   Keep them inside the content column on tablet and phone layouts. */
#page_pagination, #page_paginationBlog, #categoryfooterbar {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  clear: both;
}

/* Hide inherited flyout menus until the parent receives focus or hover.
   Older CSS set top:auto on all mobile submenus, covering page content. */
@media (max-width:780px) {
  #nav .ot-menu li > ul {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 100;
  }
  #nav .ot-menu li:hover > ul,
  #nav .ot-menu li:focus-within > ul { display: block; }
  #nav .ot-menu > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
}