/*
 * JENSKI J12 — J01 COMPOSITION RECOVERY, 11 November 2026
 *
 * Jen reviewed the actual J11 public 390px screenshot and explicitly rejected
 * its composition: giant pale logo block, free-floating ELLAS, oversized search
 * and square buttons before any article. This is a coherent layout replacement,
 * not approval of new artwork or permission to alter blog records.
 *
 * Visual authority: ORIGINAL J01 1672×941 source artwork:
 *  - one richly illustrated mural, not stacked generic UI panels
 *  - relatively small painted Jenski.co.uk paper with integrated blue ΕΛΛΑΣ
 *  - SIX short colourful illustrated paper tab slips
 *  - TWO real cream editorial papers immediately underneath
 *
 * Keep all original backed-up source mural files, category-specific world art,
 * actual WP query/article content, anchors, search and Places functionality.
 * No rendered screenshot is substituted for WordPress DOM. No third-party
 * trademark or fictional article is newly inserted by this stylesheet.
 */

/* On large screens the open left and right artworks are real mural fragments.
 * Keep the paper brand within the collage rather than blown up over it. */
body.jenski-site.home .jenski-masthead {
  position: relative !important;
  isolation: isolate;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
body.jenski-site.home .jenski-masthead::before,
body.jenski-site.home .jenski-masthead::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 0 !important;
  opacity: .96 !important;
  pointer-events: none !important;
}
body.jenski-site.home .jenski-masthead::before {
  left: 0 !important;
  right: auto !important;
  width: min(31vw, 500px) !important;
  height: clamp(175px, 22vw, 320px) !important;
  background: url("../img/jenski-home-mural-left.webp") left top /100% auto no-repeat !important;
  -webkit-mask-image: linear-gradient(to right, #000 0 67%, transparent 100%) !important;
  mask-image: linear-gradient(to right, #000 0 67%, transparent 100%) !important;
}
body.jenski-site.home .jenski-masthead::after {
  left: auto !important;
  right: 0 !important;
  width: min(40vw, 640px) !important;
  height: clamp(180px, 24vw, 340px) !important;
  background: url("../img/jenski-home-mural-right.webp") right top /100% auto no-repeat !important;
  -webkit-mask-image: linear-gradient(to left, #000 0 70%, transparent 100%) !important;
  mask-image: linear-gradient(to left, #000 0 70%, transparent 100%) !important;
}
body.jenski-site.home .jenski-masthead__top {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(180px,230px) !important;
  align-items: start !important;
  width: min(97vw,1450px) !important;
  max-width: 1450px !important;
  min-height: clamp(182px,15vw,238px) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
}
body.jenski-site.home .jenski-masthead__top a.jenski-wordmark {
  display: block !important;
  width: clamp(350px,33vw,488px) !important;
  height: clamp(176px,17vw,245px) !important;
  max-width: min(100%,488px) !important;
  margin: -5px 0 -30px clamp(160px,18vw,275px) !important;
  background-color: #f6ead5 !important;
  background-image:
    url("../img/jenski-wordmark-recovered.webp"),
    url("../img/jenski-paper-rip-overlay.svg"),
    url("../img/jenski-grunge-fibre-tile.svg") !important;
  background-size: contain,100% 100%,180px 180px !important;
  background-repeat: no-repeat,no-repeat,repeat !important;
  background-position: center,center,0 0 !important;
  background-blend-mode: normal,normal,soft-light !important;
  border: 0 !important;
  clip-path: polygon(1% 2%, 20% 0, 49% 1.5%, 83% 0, 99% 2%,
                      100% 97%, 79% 100%, 50% 98%, 19% 100%, 0 97%) !important;
  box-shadow: 3px 5px 0 rgb(21 16 18 / .30) !important;
  filter: drop-shadow(1px 2px 1px rgb(16 12 16 / .34)) !important;
  transform: rotate(-1.3deg) !important;
  position: relative !important;
  z-index: 4 !important;
}
body.jenski-site.home .jenski-masthead__top a.jenski-wordmark .jenski-wordmark__suffix {
  top: 51% !important;
  left: 74% !important;
  font-size: clamp(1.05rem,1.75vw,1.7rem) !important;
  white-space: nowrap !important;
}
/* ΕΛΛΑΣ is a distressed ink detail tucked into the same paper/mural, not its
 * own large rectangular row separating branding from the useful content. */
body.jenski-site.home .jenski-masthead__top::before {
  content: none !important;
  display: none !important;
}
body.jenski-site.home .jenski-masthead__top::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: clamp(120px,12vw,164px) !important;
  left: clamp(425px,38vw,605px) !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(113px,12vw,156px) !important;
  height: clamp(40px,4.3vw,60px) !important;
  margin: 0 !important;
  background: url("../img/jenski-j01-ellas-mark.svg") center / contain no-repeat !important;
  transform: rotate(-4deg) !important;
  opacity: .97 !important;
  filter: drop-shadow(1px 2px 0 rgb(12 14 19 / .28));
  pointer-events: none !important;
  z-index: 6 !important;
}
body.jenski-site.home .jenski-masthead__top .jenski-search {
  order: initial !important;
  position: relative !important;
  z-index: 6 !important;
  align-self: start !important;
  justify-self: end !important;
  width: min(100%,230px) !important;
  max-width: 230px !important;
  margin: 18px 10px 0 0 !important;
  padding: 0 !important;
}
body.jenski-site.home .jenski-search .wp-block-search__inside-wrapper {
  min-height: 39px !important;
  border: 2px solid #211b1c !important;
  border-radius: 12px !important;
  background: #fff8e9 !important;
  box-shadow: 2px 3px 0 rgb(20 16 18 / .70) !important;
}
body.jenski-site.home .jenski-search .wp-block-search__input {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 36px !important;
  max-height: 43px !important;
  padding: 5px 9px !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  border: 0 !important;
  background: transparent !important;
}
body.jenski-site.home .jenski-search .wp-block-search__button {
  flex: 0 0 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-height: 42px !important;
  margin: 0 2px 0 0 !important;
  padding: 5px 6px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* The six cut-paper tabs must read as little handwritten collage slips,
 * not a grid of enormous app buttons. Canonical WordPress links unchanged. */
body.jenski-site.home nav.jenski-category-nav {
  position: relative !important;
  z-index: 4 !important;
  width: min(93vw,1360px) !important;
  max-width: 1360px !important;
  padding: 0 !important;
  margin: -3px auto 5px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
body.jenski-site.home nav.jenski-category-nav > .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: repeat(6,minmax(0,1fr)) !important;
  align-items: stretch !important;
  gap: clamp(4px,.65vw,11px) !important;
}
body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a {
  position: relative !important;
  display: flex !important;
  box-sizing: border-box !important;
  min-height: 69px !important;
  height: auto !important;
  padding: 7px 6px 7px 35px !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  font: italic 900 clamp(.95rem,1.22vw,1.3rem)/1.05 "Trebuchet MS",system-ui,sans-serif !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
  color: #1d1820 !important;
  background-color: var(--jenski-j11-tab) !important;
  background-image: url("../img/jenski-grunge-fibre-tile.svg") !important;
  background-size: 180px 180px !important;
  background-blend-mode: soft-light !important;
  border: 2px solid #231d1d !important;
  clip-path: polygon(1% 5%, 21% 1%, 42% 4%, 70% 0, 98% 3%,
                      100% 95%, 81% 100%, 54% 97%, 26% 100%, 0 96%) !important;
  box-shadow: 2px 3px 0 rgb(20 13 18 / .42) !important;
  transform: rotate(var(--jenski-slip-tilt,0deg)) !important;
}
body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a .wp-block-navigation-item__label {
  text-transform: none !important;
  color: #1d1820 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-shadow: none !important;
}
body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: calc(50% - 14px) !important;
  left: 7px !important;
  width: 28px !important;
  height: 28px !important;
  background-color: #211b20 !important;
  -webkit-mask-size: 600% 100% !important;
  mask-size: 600% 100% !important;
  pointer-events: none !important;
}
body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a:focus-visible {
  outline: 3px solid #161219 !important;
  outline-offset: 3px !important;
}
/* Never make the reading sheets translucent to show off art behind words. */
body.jenski-site.home #main-content > .jenski-editorial-board {
  width: min(90vw,1380px) !important;
  margin: 6px auto 22px !important;
  padding: 3px !important;
  gap: clamp(8px,1vw,16px) !important;
}
body.jenski-site.home #main-content .jenski-editorial-board > .jenski-feature,
body.jenski-site.home #main-content .jenski-editorial-board > .jenski-home-recent {
  background-color: #fffaf1 !important;
  color: #231d1a !important;
}

/* MOBILE/TABLET — composition is NOT the desktop design stacked as giant
 * rectangles. One compact illustrated masthead, ELLAS in the mural, a quiet
 * genuine search, two rows of tactile tabs, then real article paper. */
@media (max-width:1049px) {
  body.jenski-site.home {
    background-color: #d3c4b2 !important;
    background-image:
      url("../img/jenski-scrapbook-wall-edges.svg"),
      radial-gradient(ellipse 120% 85% at 50% 10%, transparent 45%, rgb(21 16 17 / .16) 100%),
      url("../img/jenski-owner-light-scrapbook.svg"),
      url("../img/jenski-grunge-fibre-tile.svg"),
      linear-gradient(#e4d8c7,#d3c4b2) !important;
    background-size: 100% auto,100% 100%,max(100%,900px) auto,180px 180px,100% 100% !important;
    background-position: center top,center top,center top,0 0,center top !important;
    background-repeat: no-repeat,no-repeat,no-repeat,repeat,no-repeat !important;
  }
  body.jenski-site.home .jenski-masthead::before {
    left: 0 !important;
    right: auto !important;
    width: min(47vw,255px) !important;
    height: 194px !important;
    opacity: .98 !important;
    -webkit-mask-image: linear-gradient(to right, #000 0 61%,transparent 100%) !important;
    mask-image: linear-gradient(to right, #000 0 61%,transparent 100%) !important;
  }
  body.jenski-site.home .jenski-masthead::after {
    right: 0 !important;
    left: auto !important;
    width: min(49vw,265px) !important;
    height: 196px !important;
    opacity: .98 !important;
    -webkit-mask-image: linear-gradient(to left, #000 0 66%,transparent 100%) !important;
    mask-image: linear-gradient(to left, #000 0 66%,transparent 100%) !important;
  }
  body.jenski-site.home .jenski-masthead__top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    width: 100% !important;
    max-width: 650px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 3px 0 0 !important;
  }
  body.jenski-site.home .jenski-masthead__top a.jenski-wordmark {
    order: 1 !important;
    align-self: center !important;
    width: min(69vw,270px) !important;
    max-width: 270px !important;
    height: clamp(103px,32vw,128px) !important;
    margin: -2px auto 0 !important;
    transform: rotate(-1.5deg) !important;
    z-index: 5 !important;
  }
  body.jenski-site.home .jenski-masthead__top a.jenski-wordmark .jenski-wordmark__suffix {
    top: 53% !important;
    left: 73% !important;
    font-size: clamp(13px,3.75vw,16px) !important;
  }
  body.jenski-site.home .jenski-masthead__top::after {
    position: absolute !important;
    order: initial !important;
    top: clamp(89px,26vw,108px) !important;
    left: calc(50% + 1px) !important;
    right: auto !important;
    bottom: auto !important;
    width: clamp(110px,33vw,136px) !important;
    height: clamp(39px,11vw,49px) !important;
    margin: 0 !important;
    transform: rotate(-5deg) !important;
    opacity: .97 !important;
    z-index: 8 !important;
  }
  body.jenski-site.home .jenski-masthead__top .jenski-search {
    order: 3 !important;
    align-self: center !important;
    justify-self: center !important;
    width: min(89vw,400px) !important;
    max-width: 400px !important;
    height: auto !important;
    /* The painted blue ΕΛΛΑΣ now remains fully visible ABOVE this bar.
       This adds 15px, still far below the old oversized masthead height. */
    margin: 24px auto 1px !important;
    z-index: 8 !important;
  }
  body.jenski-site.home nav.jenski-category-nav {
    width: min(97vw,800px) !important;
    margin: 0 auto 2px !important;
    /* Tablet 768px: original J01-inspired paper slips are rotated.
       Their painted corners must sit INSIDE the real nav hit-area bounds,
       not project 3px beyond a zero-padding WordPress block wrapper. */
    padding: 7px 5px 8px !important;
    overflow: visible !important;
  }
  body.jenski-site.home nav.jenski-category-nav > .wp-block-navigation__container {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a {
    min-height: 58px !important;
    height: 58px !important;
    padding: 5px 3px 5px 22px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    font: italic 900 clamp(.875rem,1.6vw,1.02rem)/1.04 "Trebuchet MS",system-ui,sans-serif !important;
    letter-spacing: -.045em !important;
    transform: rotate(var(--jenski-slip-tilt,0deg)) !important;
  }
  body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a::before {
    top: calc(50% - 9px) !important;
    left: 4px !important;
    width: 18px !important;
    height: 18px !important;
  }
  body.jenski-site.home #main-content > .jenski-editorial-board {
    width: min(96vw,700px) !important;
    margin: 4px auto 18px !important;
    gap: 10px !important;
    padding: 3px !important;
  }
  body.jenski-site.home #main-content .jenski-editorial-board > .jenski-feature,
  body.jenski-site.home #main-content .jenski-editorial-board > .jenski-home-recent {
    grid-column: 1 !important;
    grid-row: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(13px,3vw,18px) !important;
    transform: rotate(0deg) !important;
  }
  body.jenski-site.home #main-content .jenski-feature-heading,
  body.jenski-site.home #main-content .jenski-home-recent .jenski-section-heading h2 {
    font: 900 clamp(1.4rem,4vw,1.75rem)/1.05 Georgia,serif !important;
    margin-bottom: 10px !important;
  }
}
/* Narrow phone remains 3x2 genuine links but never shrinks below 13.5px
 * labels or the 44px minimum accessible target. No 'Create/Travel' labels. */
@media (max-width:480px) {
  body.jenski-site.home .jenski-masthead::before {
    width: 44vw !important;
    height: 154px !important;
  }
  body.jenski-site.home .jenski-masthead::after {
    width: 49vw !important;
    height: 164px !important;
  }
  body.jenski-site.home .jenski-masthead__top a.jenski-wordmark {
    width: min(70vw,265px) !important;
    height: clamp(104px,33vw,126px) !important;
    margin: -4px auto 0 !important;
  }
  body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a {
    min-height: 58px !important;
    height: 58px !important;
    font-size: .875rem !important;
    line-height: 1.05 !important;
    padding: 5px 3px 5px 21px !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.jenski-site.home nav.jenski-category-nav li:nth-child(n) a,
  body.jenski-site.home .jenski-masthead__top a.jenski-wordmark {
    transition: none !important;
  }
}