/* karmahibri.com/design — design system (values measured from the original site) */

@font-face {
  font-family: 'Jost';
  src: url('/design/assets/fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/design/assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #222222;
  --muted: #999999;
  --footer: #dddddd;
  --panel: rgba(255, 255, 255, 0.9);
  --font-display: 'Jost', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }
ul { margin: 0; padding: 0; }
li { list-style-type: none; }
img { vertical-align: top; }
p { margin: 0; }
a { text-decoration: none; }

.preserve-whitespace { white-space: pre-wrap; }
.cfix::after, .site-header::after, .site-content::after, .logo-wrap::after,
.details-inner::after, .project-covers::after {
  clear: both;
  content: '';
  display: table;
}

/* --- page fade (driven by js/main.js) ------------------------------------ */
body { opacity: 0; }
body.ready { opacity: 1; transition: opacity 0.2s ease; }
body.fade-out { opacity: 0; transition: opacity 0.15s ease; }

/* --- layout shell -------------------------------------------------------- */
.site-wrap { position: relative; width: 100%; }
.site-container { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; float: none; }
.site-content { width: 100%; margin-left: 0; margin-right: 0; }
.sidebar-content, main { float: left; }
.sidebar-content { width: 25%; margin-right: 0; }
main { width: 75%; }

/* --- header / logo -------------------------------------------------------- */
.site-header { position: relative; }
.logo-wrap { width: 80%; max-width: 100%; margin: 0 auto; padding-top: 50px; padding-bottom: 50px; }
.logo {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  clear: both;
  word-wrap: break-word;
}
.logo a { color: inherit; }
.logo-secondary {
  font-family: helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  padding-top: 36px;
  clear: both;
  word-wrap: break-word;
}

/* --- hamburger (hidden on desktop) ---------------------------------------- */
.hamburger-click-area {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 30px 5%;
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hamburger { position: relative; width: 24px; }
.hamburger i { display: block; height: 2px; margin-bottom: 4px; background-color: #000000; }
.hamburger i:last-child { margin-bottom: 0; }

/* --- nav (shared by sidebar + overlay) ------------------------------------- */
nav { width: 80%; max-width: 100%; margin: 0 auto; float: none; }
nav .group { padding-top: 0; padding-bottom: 40px; }
nav .page-title { padding-top: 0; padding-bottom: 20px; text-align: center; }
nav .gallery-title { padding-top: 0; padding-bottom: 20px; text-align: center; }
nav .project-title { padding-top: 0; padding-bottom: 10px; text-align: center; }
nav .page-title a,
nav .project-title a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}
nav .page-title a { line-height: 16px; }
nav .project-title a { line-height: 20px; }
nav .page-title a:hover, nav .page-title a.active,
nav .project-title a:hover, nav .project-title a.active { color: var(--ink); }
nav .gallery-title a {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
nav .gallery-title a:hover, nav .gallery-title a.active { color: var(--muted); }

/* --- responsive nav overlay ----------------------------------------------- */
.responsive-nav { display: none; opacity: 0; visibility: hidden; }

/* --- work grid -------------------------------------------------------------- */
.project-covers { display: flex; flex-wrap: wrap; padding-top: 0; padding-bottom: 0; }
.project-cover { display: block; position: relative; width: 50%; margin-right: 0; }
.project-cover .cover-content-container { position: relative; overflow: hidden; margin: 0; }
.project-cover .cover-image-wrap { position: relative; overflow: hidden; }
.project-cover .cover-image { position: relative; width: 100%; margin: 0 auto; transform: translateZ(0); }
.project-cover.hold-space .cover-image::before { content: ''; display: block; width: 100%; padding-bottom: 100%; }
.project-cover.hold-space .cover { position: absolute; left: 0; top: 0; min-height: 100%; }
.project-cover .cover { display: block; width: 100%; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.cover__img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  background-color: rgba(0, 0, 0, 0.03);
}
.cover__img.image-loaded { background-color: transparent; }
.project-cover .details-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 100%;
  height: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
  opacity: 0;
  transition: opacity 0.15s ease;
  backface-visibility: hidden;
}
.project-cover .details { display: flex; align-items: center; position: relative; height: 100%; width: 100%; background: var(--panel); }
.project-cover .details-inner { width: 100%; overflow: hidden; }
.project-cover .date {
  clear: both;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
}
.project-cover .title {
  clear: both;
  width: 90%;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 50px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.project-cover:hover .details-wrap,
.project-cover.touch-hover .details-wrap { opacity: 1; }

/* --- back to top -------------------------------------------------------------- */
.back-to-top { clear: both; display: block; text-align: center; padding-top: 60px; padding-bottom: 60px; }
.back-to-top a { font-family: var(--font-body); font-size: 18px; line-height: 18px; font-weight: 400; color: var(--muted); }
.back-to-top a:hover { color: #666666; }
.back-to-top .arrow { display: inline-block; margin-right: 10px; }
.back-to-top-fixed {
  position: fixed;
  z-index: 3;
  bottom: 40px;
  right: max(24px, calc(50vw - 700px + 40px));
  width: 26px;
  height: 26px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s ease 0.2s;
}
.back-to-top-fixed.visible { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.icon-back-to-top { display: block; width: 26px; height: 26px; fill: #000000; }

/* --- project / standard pages ------------------------------------------------ */
.page-container { max-width: 100%; }
.page-header {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 70px;
  padding-bottom: 70px;
}
.page-header .title {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 50px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  padding-top: 0;
  padding-bottom: 20px;
  margin: 0;
}
.page-header .description { text-align: center; }

.standard-modules .modules .image,
.standard-modules .modules .text,
.standard-modules .modules .media_collection,
.standard-modules .modules .tree { width: 100%; }
.standard-modules .image { margin-left: auto; margin-right: auto; padding-bottom: 40px; }
.standard-modules .text {
  max-width: 800px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 40px;
}
/* Rich text: matches the original theme — desktop 18px/26px, base color
   #999 and center alignment (the content's inline styles override both);
   paragraph divs have no extra padding on desktop. */
.standard-modules .rich-text div,
.standard-modules .rich-text p {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: var(--muted);
  text-align: center;
}
.project-module-image img { display: block; width: 100%; height: auto; }
html.js .project-module-image img:not(.image-loaded) { height: 0; }
html:not(.js) .project-module-image img { padding-bottom: 0 !important; background: none; }
.project-module-image img.image-loaded { padding-bottom: 0 !important; background: transparent; }
.js-lightbox { display: block; cursor: pointer; }

/* tree (side-by-side image rows; flush outer edges, 8px seam) */
.standard-modules .tree .tree-wrapper { display: flex; }
.standard-modules .tree .tree-wrapper.valign-top { align-items: flex-start; }
.standard-modules .tree .tree-child-wrapper {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  min-width: 1px;
}
.standard-modules .tree .tree-child-wrapper:first-child { border-left: 0; }
.standard-modules .tree .tree-child-wrapper:last-child { border-right: 0; }
.standard-modules .tree .tree-child-wrapper .image { padding-bottom: 0; }

/* media collection (justified row of square images) */
.standard-modules .media_collection { margin-left: auto; margin-right: auto; padding-bottom: 40px; }
.grid--main { display: flex; flex-wrap: wrap; overflow: hidden; margin: 0 -4px; }
.grid__item-container { position: relative; flex: 1 1 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid transparent; }
.grid__item-container .js-lightbox { display: block; }
.grid__item-filler { display: block; background: rgba(0, 0, 0, 0.03); }
.grid__item-image {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.image-loaded ~ .grid__item-filler { background: transparent; }

/* --- lightbox -------------------------------------------------------------- */
#lightbox-wrap {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(255, 255, 255, 0.94);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s ease 0.2s;
}
#lightbox-wrap.open { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
#lightbox-wrap img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
body.lightbox-open { overflow: hidden; }
.lightbox-close {
  position: fixed;
  top: 40px;
  right: 5%;
  width: 20px;
  height: 20px;
  cursor: pointer;
  padding: 20px;
  box-sizing: content-box;
  background: none;
  border: 0;
}
.lightbox-close::before, .lightbox-close::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 20px;
  margin: -10px 0 0 -1px;
  background-color: #000000;
}
.lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }
.lightbox-prev, .lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  padding: 20px;
  z-index: 100001;
  background: none;
  border: 0;
}
.lightbox-prev { left: 3%; }
.lightbox-next { right: 3%; }
.lightbox-prev svg, .lightbox-next svg { display: block; width: 16px; height: 28px; fill: #000000; }
.lightbox-caption {
  position: fixed;
  bottom: 30px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

.site-footer {
  clear: both;
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 19px;
  font-weight: 400;
  color: var(--footer);
  padding-top: 60px;
  padding-bottom: 60px;
}

/* --- ≤932px -------------------------------------------------------------- */
@media (max-width: 932px) {
  .sidebar-content { float: none; margin: 0; width: auto; }
  .sidebar-content nav { display: none; }
  .site-header { padding: 40px 5%; }
  .logo-wrap { width: 100%; max-width: 100%; padding: 0; }
  .logo { max-width: 100%; padding: 0 39px 0 0; }
  .logo-text { padding-left: 39px; }
  .logo-secondary { display: none; }
  .hamburger-click-area { display: block; }
  main, .site-container { width: 100%; }
  .site-content { margin: 0; padding: 0; width: 100%; }

  .responsive-nav {
    display: flex;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #ffffff;
    padding: 50px 5% 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s ease 0.2s, opacity 0.2s ease 0s;
  }
  .responsive-nav nav { display: none; float: none; margin: auto; max-width: 100%; width: 100%; }
  .responsive-nav .group { padding: 0; }
  .responsive-nav .page-title,
  .responsive-nav .project-title,
  .responsive-nav .gallery-title { display: block; text-align: center; padding: 0 0 30px; }
  .responsive-nav .page-title a,
  .responsive-nav .project-title a,
  .responsive-nav .gallery-title a { font-size: 22px; line-height: 32px; }
  .close-responsive-click-area {
    cursor: pointer;
    padding: 50px 6%;
    position: fixed;
    right: 0;
    top: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .close-responsive-button { position: fixed; right: 5%; top: 40px; width: 20px; height: 20px; }
  .close-responsive-button::before,
  .close-responsive-button::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    width: 2px;
    height: 20px;
    background-color: #000000;
  }
  .close-responsive-button::before { transform: rotate(45deg); }
  .close-responsive-button::after { transform: rotate(-45deg); }
  .show-responsive-nav { overflow: hidden; }
  .show-responsive-nav .responsive-nav {
    opacity: 1;
    visibility: visible;
    transition: visibility 0s ease 0s, opacity 0.2s ease 0s;
  }
  .show-responsive-nav .responsive-nav nav { display: block; }
  .show-responsive-nav .site-header,
  .show-responsive-nav .site-container { display: none; }

  .project-covers { padding-top: 0; padding-bottom: 0; }
  .project-cover .title { font-size: 31px; line-height: 31px; }
  .project-cover .date { font-size: 17px; line-height: 17px; padding-bottom: 14px; }

  .page-header { padding: 30px 5%; }
  .page-header .title { font-size: 31px; line-height: 31px; padding-bottom: 14px; }
  .standard-modules .image { padding-bottom: 20px; }
  .standard-modules .text { padding: 14px 5% 20px; }
  .standard-modules .rich-text div,
  .standard-modules .rich-text p { padding-top: 0; padding-bottom: 13px; }
  .standard-modules .rich-text div,
  .standard-modules .rich-text div span,
  .standard-modules .rich-text p,
  .standard-modules .rich-text p span { font-size: 14px !important; line-height: 20px !important; }
  .standard-modules .media_collection { padding-bottom: 20px; }
  .standard-modules .tree .tree-wrapper { display: block; }
  .standard-modules .tree .tree-child-wrapper { border-left: 0; border-right: 0; flex: none !important; }
  .standard-modules .tree .tree-child-wrapper .image { padding-bottom: 20px; }

  .site-footer { padding: 28px 5%; }
  .back-to-top { padding-top: 28px; padding-bottom: 28px; }
  .back-to-top a { font-size: 14px; line-height: 14px; }

}

/* --- ≤540px -------------------------------------------------------------- */
@media (max-width: 540px) {
  .site-header { padding-top: 30px; padding-bottom: 30px; }
  .logo { font-size: 22px; line-height: 22px; }
  .close-responsive-click-area { padding: 40px 10%; }
  .close-responsive-button { top: 30px; }
  .project-cover { width: 100%; margin-right: 0; }
  .project-cover .title { font-size: 25px; line-height: 25px; }
  .project-cover .date { font-size: 14px; line-height: 14px; padding-bottom: 13px; }

  .page-header { padding-top: 26px; padding-bottom: 26px; }
  .page-header .title { font-size: 25px; line-height: 25px; padding-bottom: 13px; }
  .standard-modules .image { padding-bottom: 18px; }
  .standard-modules .text { padding: 13px 5% 18px; }
  .standard-modules .media_collection { padding-bottom: 18px; }
  .standard-modules .tree .tree-child-wrapper .image { padding-bottom: 18px; }
  .site-footer { padding: 25px 5%; }
  .back-to-top { padding-top: 25px; padding-bottom: 25px; }
  .back-to-top a { font-size: 14px; line-height: 20px; }

}