/* ==========================================================================
   Nora Borkenhagen – site styles
   Measurements follow the former WordPress/Elementor site. Breakpoints:
   - nav:      hamburger menu at <= 1024px
   - layout:   mobile at <= 767px
   - gallery:  12 columns > 768px, 2 columns 569–768px, 1 column <= 568px,
               gutter 10px at <= 992px
   ========================================================================== */

@font-face {
  font-family: "Noras";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Bo_comic_mittel-Regular.woff2") format("woff2"),
       url("/static/fonts/Bo_comic_mittel-Regular.ttf") format("truetype");
}

:root {
  --color-primary: #000;
  --color-secondary: #54595f;
  --color-text: #333;
  --color-accent: #bed481;
  --color-link: #c36;
  --color-link-hover: #336;
  --color-bg: #fff;
  --header-height: 129px;
  --font: "Noras", sans-serif;
}

/* ---------- Reset / base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: 80px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:active {
  color: var(--color-link-hover);
}

h1, h2, h3, h4, h5, h6 {
  margin: 8px 0 16px;
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin: 0 0 14.4px;
}

figure {
  margin: 0;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10001;
  padding: 0.75em 1.5em;
  background: #fff;
  color: #0073aa;
  font-size: 14px;
  text-decoration: underline;
}

.skip-link:focus {
  position: fixed;
  top: 0;
}

/* Running text (book pages, workshop, info) */
.prose {
  font-size: 20px;
  line-height: 30px;
}

.prose h2 {
  font-size: 32px;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1328px; /* 1308px content + padding */
  margin: 0 auto;
  padding: 10px;
}

/* Like the old site: the logo takes 18% of the header row (max. 1308px wide). */
.site-header__logo {
  flex: 0 0 18%;
  padding: 10px;
}

.site-header__logo img {
  width: 100%;
}

/* Like the old site: the menu block takes 41% of the header row and centers the menu.
   (Unlike the old site it never wraps onto a second line.) */
.main-nav {
  flex: 0 0 41%;
  min-width: max-content;
}

.main-nav ul {
  display: flex;
  justify-content: center;
  margin: 1px 0 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: block;
  padding: 7px 14px;
  background: #fff;
  color: var(--color-primary);
  font-size: 28px;
  line-height: 28px;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--color-accent);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 44px;
  margin-right: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: #494c4f;
  cursor: pointer;
}

.nav-toggle svg {
  width: 25px;
  height: 25px;
  margin: 0 auto;
  fill: currentColor;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

@media (max-width: 1210px) {
  .site-header__logo {
    flex-basis: 231.167px;
  }
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: block;
  }

  .main-nav {
    min-width: 0;
    position: absolute;
    top: calc(100% - 15px);
    left: 0;
    right: 0;
    display: none;
    background: #fff;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    display: block;
    margin: 0;
  }

  .main-nav a {
    padding: 15px 24px;
    color: var(--color-secondary);
    font-size: 17px;
    line-height: 24px;
  }

  .main-nav a[aria-current="page"] {
    color: var(--color-secondary);
  }

  .main-nav a:hover,
  .main-nav a:focus-visible {
    color: var(--color-accent);
  }
}

@media (max-width: 767px) {
  .site-header__logo {
    flex-basis: 200px;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-top: 52px;
}

.site-footer__rule {
  height: 1px;
  margin: 0 10px;
  border: 0;
  background: #000;
}

.site-footer__main {
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  margin-top: 123px;
  padding: 10px;
}

.site-footer__spacer {
  flex: 0 0 6.213%;
}

.site-footer__contact {
  display: flex;
  align-items: center;
  flex: 0 0 36.278%;
  padding: 10px;
}

.site-footer__contact a {
  display: block;
  width: 100%;
}

.site-footer__contact img {
  width: 100%;
  margin: 64px;
}

.site-footer__icons {
  display: flex;
  flex: 0 0 6.217%;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 10px;
}

.site-footer__icons a {
  display: block;
  padding-bottom: 7px;
}

.site-footer__icons img {
  width: 50px;
  height: 50px;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px;
}

.site-footer__bottom span,
.site-footer__bottom a {
  color: var(--color-text);
  line-height: 24px;
}

/* Contact image fades in from below when scrolled into view (main.js). */
.js .fade-in {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 600ms ease-in, transform 600ms ease-in;
}

.js .fade-in.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .site-footer__spacer {
    flex-basis: 75.467px;
  }

  .site-footer__icons {
    flex-basis: 80px;
  }
}

@media (max-width: 767px) {
  .site-footer__main {
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .site-footer__spacer {
    display: none;
  }

  .site-footer__contact {
    flex-basis: 100%;
  }

  .site-footer__contact img {
    margin: 0;
  }

  .site-footer__icons {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: center;
  }

  .site-footer__bottom {
    padding-bottom: 10px;
  }
}

/* ---------- Home ---------- */

.intro {
  padding: 62px 10px 10px;
}

@media (max-width: 767px) {
  .intro {
    max-width: 500px;
    margin: 0 auto;
  }
}

.intro__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
}

/* ---------- Gallery (Modula "custom grid" replacement) ---------- */

.gallery-wrap {
  container-type: inline-size;
}

.gallery {
  --cols: 12;
  --gap: var(--gutter, 35px);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  /* Modula rounds the cell size to whole pixels; browsers without round() use the line above. */
  grid-auto-rows: round(nearest, (100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols), 1px);
  grid-auto-flow: dense;
  gap: var(--gap);
}

.gallery__tile {
  position: relative;
  display: block;
  grid-column: span var(--w);
  grid-row: span var(--h);
  overflow: hidden;
  cursor: zoom-in;
}

.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s linear;
}

/* Hover: image at 50% over black, like the old Modula galleries. */
.gallery__tile:hover,
.gallery__tile:focus-visible {
  background: #000;
}

.gallery__tile:hover img,
.gallery__tile:focus-visible img {
  opacity: 0.5;
}

@media (max-width: 992px) {
  .gallery {
    --gap: 10px;
  }
}

@media (max-width: 768px) {
  .gallery {
    --cols: 2;
  }

  .gallery__tile {
    grid-column: span var(--tw);
    grid-row: span var(--th);
  }
}

@media (max-width: 568px) {
  .gallery {
    --cols: 1;
    grid-auto-rows: auto;
  }

  /* Full width; height follows Modula: width * h/w + gutter * (h/w - 1) */
  .gallery__tile {
    grid-column: span 1;
    grid-row: auto;
    height: calc((100cqw + var(--gap)) * var(--h) / var(--w) - var(--gap));
  }
}

/* The old site disabled the lightbox below 900px; keep that behaviour. */
@media (max-width: 900px) {
  .gallery__tile {
    cursor: default;
  }

  .gallery__tile:hover {
    background: none;
  }

  .gallery__tile:hover img {
    opacity: 1;
  }
}

/* ---------- Illustrations page ---------- */

.section-tabs,
.gallery-section,
.sketchbook {
  max-width: 91%;
  margin: 0 auto;
}

.section-tabs {
  display: flex;
  align-items: flex-end;
  height: 111px;
  padding: 0 10px 10px;
  scroll-margin-top: calc(var(--header-height) - 100px);
}

.section-tabs:first-child {
  height: 140px;
  padding-bottom: 12px;
}

.section-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0 25px;
  margin: 8px 0 16px;
  color: var(--color-accent);
  font-size: 20px;
  line-height: 24px;
}

.section-tabs__bar a {
  color: var(--color-primary);
}

.section-tabs__bar a:hover,
.section-tabs__bar a:focus-visible {
  color: var(--color-accent);
}

.gallery-section {
  padding: 10px;
}

.sketchbook {
  max-width: 800px;
}

.sketchbook img {
  width: 100%;
  padding: 10px;
}

@media (max-width: 767px) {
  .section-tabs,
  .gallery-section {
    max-width: none;
  }
}

/* ---------- Books overview ---------- */

/* Sizes copied from Elementor: boxes 39% / 40% of the row (max. 1100px), 60px apart;
   the second cover is fixed at 409px. */
.book-covers {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 10px 10px;
}

.book-covers__item {
  display: block;
  flex: none;
  width: 39%;
  margin: -4px 60px 0 0;
  padding: 10px;
}

.book-covers__item:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40%;
  margin: 0;
}

.book-covers__item img {
  width: 100%;
}

.book-covers__item:last-child img {
  width: 409px;
  max-width: 100%;
  margin-top: -3px;
}

@media (max-width: 767px) {
  .book-covers {
    display: block;
    padding: 86px 0 0;
  }

  .book-covers__item,
  .book-covers__item:last-child {
    width: 100%;
    margin: 0;
  }
}

/* ---------- Book detail ---------- */

.book {
  display: flex;
  max-width: 1220px; /* 1200px content */
  margin: 0 auto;
  padding: 70px 10px 20px;
}

/* Column sizes copied from Elementor: Bo = 705px cover + 100% text, shrinking
   proportionally (gives 446px at full width); OmasGarten = 40% / 50%. */
.book__cover {
  flex: 0 1 705px;
  min-width: 0;
  padding: 10px;
}

.book--omasgarten .book__cover {
  flex-basis: 40%;
}

.book__details {
  display: flex;
  flex: 0 1 100%;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
}

.book__details .prose {
  margin-left: 40px;
}

.book--omasgarten .book__details {
  flex-basis: 50%;
}

.book__details--center {
  justify-content: flex-end;
}

.book__heading {
  font-size: 24px;
}

/* The old book texts have no space between paragraphs (empty paragraphs are used instead). */
.book .prose p {
  margin: 0;
}

.book__awards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin: 20px 0 0 28px;
  padding: 10px;
}

.book__awards img:first-child {
  width: 270px;
}

.book__awards img:last-child {
  width: 143px;
}

.book-gallery--wide {
  padding: 0 20px 10px;
}

.book-gallery--narrow {
  max-width: 91%;
  margin: 50px auto 0;
  padding: 10px;
}

@media (max-width: 767px) {
  .book {
    flex-direction: column;
    padding: 70px 10px 20px;
  }

  .book__cover,
  .book--omasgarten .book__cover {
    flex: none;
    padding: 10px;
  }

  .book__details,
  .book--omasgarten .book__details {
    flex: none;
    padding: 10px;
  }

  .book__details .prose {
    margin-left: 0;
    padding: 0 15px;
  }

  .book__awards {
    flex-direction: column;
    align-self: flex-start;
    width: 83%;
    margin: 20px 0 0 28px;
  }

  .book__awards img:first-child {
    width: 100%;
  }

  .book-gallery--narrow {
    max-width: none;
  }
}

/* ---------- Workshop ---------- */

/* Like Elementor: 91% of the width minus the 2 x 10px side padding, split 60/40;
   both columns shrink proportionally because of the gap. */
.workshop {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: calc((100% - 20px) * 0.91);
  margin: 0 auto;
  padding: 10px 0;
}

.workshop:first-child {
  margin-top: 75px;
}

.workshop .carousel {
  flex: 0 1 60%;
}

.workshop__text {
  flex: 0 1 40%;
  align-self: stretch;
  min-width: 0;
  padding: 0 41px 0 40px;
}

.prose .workshop__heading {
  font-size: 24px;
}

@media (max-width: 767px) {
  .workshop {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    padding: 10px;
  }

  .workshop .carousel {
    flex: none;
  }

  .workshop__text {
    flex: none;
    align-self: center;
    width: 334px;
    max-width: 100%;
    padding: 0 15px;
  }
}

/* Carousel (replacement for the Elementor image carousel) */
.carousel {
  position: relative;
  min-width: 0;
  padding-bottom: 30px;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel__track {
  display: flex;
  transition: transform 500ms ease;
}

.carousel__slide {
  flex: 0 0 100%;
  padding-bottom: 7px;
  text-align: center;
}

.carousel__slide img {
  width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(237, 237, 237, 0.9);
  cursor: pointer;
  transform: translateY(-50%);
}

.carousel__arrow svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.carousel__arrow--prev {
  left: 10px;
}

.carousel__arrow--next {
  right: 10px;
}

.carousel__dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  height: 24px;
  align-items: center;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: 0.2;
  cursor: pointer;
}

.carousel__dot[aria-current="true"] {
  opacity: 1;
}

.js .carousel__arrow {
  display: block;
}

/* ---------- Info ---------- */

.info {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0 10px;
}

.info__portrait {
  flex: 0 0 442px;
}

.info__text {
  flex: 0 0 590px;
  margin: 73px 7px 0 0;
  padding-bottom: 168px;
}

/* The old page had two empty lines (2 x 30px) before this heading. */
.info__exhibitions {
  margin-top: 83px;
}

@media (max-width: 1240px) {
  .info {
    padding-left: 10px;
    padding-right: 10px;
  }

  .info__portrait {
    flex: 0 1 442px;
  }

  .info__text {
    flex: 0 1 590px;
  }
}

@media (max-width: 767px) {
  .info {
    flex-direction: column;
    padding: 30px 10px 0;
  }

  .info__portrait,
  .info__text {
    flex: none;
    width: 340px;
    max-width: 100%;
  }

  .info__text {
    margin: 0;
    padding: 0 5px 178px;
  }
}

/* ---------- Impressum ---------- */

.impressum {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 56.179%;
  min-height: 595px;
  margin: 20px auto 0;
  padding: 30px 10px 10px;
}

.impressum p {
  margin: 0;
}

@media (max-width: 767px) {
  .impressum {
    width: auto;
  }
}

/* ---------- 404 ---------- */

.not-found {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 20px 40px;
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 24, 27, 0.95);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 48px 72px;
  overflow: hidden;
  touch-action: none;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s ease, opacity 0.2s linear;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__img.is-zoomed {
  cursor: zoom-out;
  transform: scale(2);
}

.lightbox__img.is-loading {
  opacity: 0;
}

.lightbox__btn {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.65);
  color: #fff;
  cursor: pointer;
}

.lightbox__btn:hover {
  background: rgba(70, 70, 73, 0.75);
}

.lightbox__btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__btn[hidden] {
  display: none;
}

.lightbox__close {
  top: 8px;
  right: 8px;
}

.lightbox__prev,
.lightbox__next {
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: 12px;
}

.lightbox__next {
  right: 12px;
}

.lightbox__counter {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #ddd;
  font-size: 14px;
}

@media (max-width: 578px) {
  .lightbox__stage {
    padding: 56px 8px;
  }
}

html.has-lightbox,
html.has-lightbox body {
  overflow: hidden;
}