/* carbon-item/carbon-column are custom elements with no browser default
   layout (no proprietary JS registers them anymore), so without an explicit
   display/width rule they shrink-to-fit their content: the <img> then
   renders at its literal width/height HTML attributes (the full-resolution
   scrape size, e.g. 1920px) instead of filling its grid column. */
carbon-item, carbon-column {
  display: block;
  width: 100%;
  min-width: 0;
}

carbon-image {
  width: 100%;
}

carbon-image img {
  width: 100%;
  height: 100%;
}

/* Custom play-button overlay for the static <video> rebuild of video.html
   (the real site uses a JS-driven <carbon-player> component with its own
   .posterPlay button; this mirrors its look using plain CSS + a small
   script that toggles visibility on play/pause, see js/video-poster-play.js). */
.video-tile,
.video-wrapper {
  position: relative;
}

/* Each tile keeps its own real aspect-ratio (portrait/square/16:9 videos are
   mixed in the same row); without this the grid stretches every cell to the
   height of the tallest item in its row, leaving a blank grey gap under the
   shorter videos. */
.video-grid {
  align-items: start;
}

.video-tile .posterPlay,
.video-wrapper .posterPlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sizing from width alone (with aspect-ratio:1 and height:auto) keeps the
     circle perfectly round even on narrow/tall tiles. Using max-width and
     max-height together on a non-square tile would size each axis against a
     different base and stretch the circle into an oval. */
  width: min(136px, 40%);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 5;
  transition: background-color 0.2s, opacity 0.2s;
}

.video-tile .posterPlay:hover,
.video-wrapper .posterPlay:hover {
  background: rgba(0, 0, 0, 0.2);
}

.video-tile .posterPlay:before,
.video-wrapper .posterPlay:before {
  content: '';
  background-image: url('../icons/play.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 40%;
  height: 40%;
}

.video-tile .posterPlay.is-hidden,
.video-wrapper .posterPlay.is-hidden {
  display: none;
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../Font/Work-Sans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Work Sans';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../Font/Work-Sans-700.woff2') format('woff2');
}

:root {
  --site-header-height: 180px;
}

/* Real site shows the logo at full size (--scale:1, 100px) on page load;
   the scraped inline value of 0.83 was captured mid-scroll (sticky-header
   shrink state) and is wrong for the static, non-scrolling rebuild. */
h1.logo_46738366 {
  --scale: 1 !important;
}

body {
  font-family: 'Work Sans', sans-serif;
}

.navigation > .overlay.open {
  background: #03f;
}

/* The scraped inline style="--link-color:#1b1b1b" on the sticky nav span
   always wins over the custom-property override baked into its own <style>
   block (inline beats any selector, even an ID one), so the fullscreen
   hamburger menu inherited the dark link color instead of turning white.
   Force it directly on the actual color consumers instead of fighting the
   custom property. */
.navigation > .overlay.open nav a,
.navigation > .overlay.open nav a span {
  color: #fff;
}

.navigation > .overlay.open nav a span:before,
.navigation > .overlay.open nav a.active span:before {
  background-color: #fff;
}

.hamburgering .navIcon {
  fill: #fff;
  stroke: #fff;
  color: #fff;
}

.desktop nav a.active span:before {
  width: 100%;
  background-color: var(--link-color, #fff);
}

.block.animated.visible > .content {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

#navigation_5448716_4809811 {
  position: relative;
  display: block;
  z-index: 1000;
}

body.page-home #navigation_5448716_4809811,
body.page-internal #navigation_5448716_4809811 {
  min-height: var(--site-header-height);
}

body.page-home #navigation_5448716_4809811 {
  position: relative;
}

.nav-toggle {
  position: absolute;
  top: 58px;
  right: 34px;
  z-index: 5001;
  display: block;
  width: 24px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hamburgering .nav-toggle {
  position: fixed;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  display: block;
  width: 24px;
  height: 2px;
  background: #000;
  transform-origin: center;
  transition: top 200ms ease, opacity 150ms ease, transform 200ms ease, background-color 150ms ease;
}

.nav-toggle span:nth-child(1) {
  top: 0;
}

.nav-toggle span:nth-child(2) {
  top: 9px;
}

.nav-toggle span:nth-child(3) {
  top: 18px;
}

.hamburgering .nav-toggle span {
  background: #fff;
}

.hamburgering .nav-toggle span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburgering .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.hamburgering .nav-toggle span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

.branding .icon {
  background-image: url('../icons/carbonmade-badge.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 768px) and (min-height: 700px) {
  body.page-home {
    height: 100%;
    overflow: hidden;
  }

  body.page-home {
    margin: 0;
  }

  body.page-home .page {
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  body.page-home .page > .guts {
    height: calc(100vh - var(--site-header-height));
    min-height: 0;
    max-height: calc(100vh - var(--site-header-height));
    display: flex;
    flex-direction: column;
  }

  body.page-home .page > .guts > .content.blocks {
    flex: 1 1 auto;
    min-height: 0;
  }

  #item_0000000053000c2400000000000006a2_2 {
    width: 360px !important;
    max-width: 100%;
  }


  body.page-home footer {
    flex: 0 0 auto;
  }
}

@media (max-width: 767px), (max-height: 699px) {
  body.page-home {
    height: auto;
    overflow-y: auto;
  }

  body.page-home .page {
    min-height: 100%;
    max-height: none;
    overflow: visible;
  }
}

/* Internal pages: editoria */
.page-internal {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.page-internal #navigation_5448716_4809811 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--site-header-height);
  z-index: 3000;
  background: transparent;
}

body.page-internal #navigation_5448716_4809811 > header {
  position: relative;
  z-index: 1;
}

body.page-internal .nav-toggle {
  position: fixed;
  z-index: 5001;
}

/* The fixed header floats out of normal flow, so reserve its height at the
   top of the page content; otherwise the header overlaps the first project
   title even before any scrolling happens. */
body.page-internal .page.project > .guts {
  padding-top: var(--site-header-height);
}

.editoria-body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  color: #1b1b1b;
}

@media (min-width: 768px) and (min-height: 700px) {
  .page-internal,
  .editoria-body {
    height: auto;
    overflow-y: auto;
  }
}

body.page-editoria .editoria-page {
  --site-margin: 40px;
  padding: var(--site-header-height) 0 0;
  overflow-x: hidden;
}

body.page-editoria .editoria-project {
  margin: 0;
}

body.page-editoria .editoria-project:first-child {
  margin-top: 0;
}

body.page-editoria .editoria-project:last-child {
  margin-bottom: 0;
}

body.page-editoria .project-header {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(880px + (var(--site-margin) * 2));
  margin: 0;
  padding: 80px var(--site-margin) 28px;
  color: #151515;
}

body.page-editoria .editoria-project:first-child .project-header {
  padding-top: 0;
}

body.page-editoria .project-marker {
  margin: 0 0 12px;
  color: #151515;
  font-size: 3em;
  line-height: 1;
  font-weight: 400;
}

body.page-editoria .project-header h1 {
  margin: 0;
  color: #0e0e0e;
  font-size: 4.1em;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: 0.005em;
}

body.page-editoria .project-header h1 span {
  font: inherit;
}

body.page-editoria .project-header p {
  margin: 8px 0 0;
  color: #0e0e0e;
  font-size: 2.3em;
  line-height: 1.2;
  font-weight: 400;
}

body.page-editoria .project-gallery {
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

body.page-editoria .project-gallery figure {
  margin: 0;
}

body.page-editoria .project-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-editoria .editoria-slider {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}

body.page-editoria .editoria-slider-track {
  width: 100vw;
  max-width: none;
  height: auto;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body.page-editoria .editoria-slider-track figure,
body.page-editoria .editoria-slider-track img {
  height: auto;
}

body.page-editoria .editoria-slider-track img {
  width: 100%;
  object-fit: initial;
}

.editoria-slide + .editoria-slide {
  margin-top: 24px;
}

.js-enabled .editoria-slider.is-ready .editoria-slide {
  display: none;
  margin-top: 0;
}

.js-enabled .editoria-slider.is-ready .editoria-slide.is-active {
  display: block;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.slider-arrow::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-top: 2px solid #1b1b1b;
  border-left: 2px solid #1b1b1b;
}

body.page-editoria .slider-prev {
  left: 20px;
}

.slider-prev::before {
  transform: rotate(-45deg);
}

body.page-editoria .slider-next {
  right: 20px;
}

.slider-next::before {
  left: 0;
  transform: rotate(135deg);
}

.slider-arrow[disabled] {
  opacity: 0.18;
  cursor: default;
}

body.page-editoria .smart-grid,
body.page-editoria .single-image,
body.page-editoria .masonry-grid {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.page-editoria .smart-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 1px;
  align-items: stretch;
}

body.page-editoria .smart-grid figure:first-child,
body.page-editoria .smart-grid figure:last-child {
  grid-column: span 2;
}

body.page-editoria .smart-grid img,
body.page-editoria .masonry-grid img {
  height: 100%;
  object-fit: cover;
}

body.page-editoria .project-gender-bender .project-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: clamp(340px, 42vw, 540px);
  gap: 1px;
}

body.page-editoria .project-gender-bender .project-grid figure:first-child {
  grid-column: 1 / 4;
}

body.page-editoria .project-gender-bender .project-grid figure:nth-child(2) {
  grid-column: 4 / 6;
}

body.page-editoria .project-gender-bender .project-grid figure:nth-child(3) {
  grid-column: 1 / 3;
}

body.page-editoria .project-gender-bender .project-grid figure:last-child {
  grid-column: 3 / 6;
}

body.page-editoria .project-gender-bender .project-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

body.page-editoria .project-gender-bender .project-grid figure:nth-child(2) img {
  object-position: center center;
}

body.page-editoria .project-gender-bender .project-grid figure:nth-child(3) img {
  object-position: center 42%;
}

body.page-editoria .masonry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}

body.page-editoria .editoria-footer {
  min-height: 0;
  height: auto;
  margin-top: 0;
  color: #1b1b1b;
  padding: 20px var(--site-margin);
  font-size: 10px;
  line-height: 1.25;
}

body.page-editoria .editoria-footer .content {
  min-height: 0;
  padding: 0;
}

@media (max-width: 900px) {
  body.page-editoria .editoria-page {
    padding-top: var(--site-header-height);
  }

  body.page-editoria .project-header {
    max-width: none;
    padding-left: var(--site-margin);
    padding-right: var(--site-margin);
  }

  body.page-editoria .project-header h1 {
    font-size: 3.6em;
  }

  body.page-editoria .project-marker {
    font-size: 3em;
  }

  body.page-editoria .project-header p {
    font-size: 2.1em;
  }

  body.page-editoria .slider-prev {
    left: 10px;
  }

  body.page-editoria .slider-next {
    right: 10px;
  }
}

@media (max-width: 767px) {
  body.page-editoria .editoria-page {
    --site-margin: 20px;
  }

  body.page-editoria .editoria-project {
    margin-bottom: 0;
  }

  body.page-editoria .project-header {
    padding-top: 72px;
    padding-bottom: 24px;
  }

  body.page-editoria .project-header h1 {
    font-size: clamp(2.1em, 10vw, 3.2em);
  }

  body.page-editoria .project-marker {
    font-size: 2.8em;
  }

  body.page-editoria .project-header p {
    font-size: clamp(1.7em, 6vw, 2em);
  }

  body.page-editoria .smart-grid,
  body.page-editoria .masonry-grid {
    grid-template-columns: 1fr;
  }

  body.page-editoria .smart-grid figure:first-child,
  body.page-editoria .smart-grid figure:last-child,
  body.page-editoria .gender-grid figure:nth-child(2),
  body.page-editoria .gender-grid figure:nth-child(3) {
    grid-column: auto;
  }

  body.page-editoria .project-gender-bender .project-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  body.page-editoria .project-gender-bender .project-grid figure,
  body.page-editoria .project-gender-bender .project-grid figure:first-child,
  body.page-editoria .project-gender-bender .project-grid figure:nth-child(2),
  body.page-editoria .project-gender-bender .project-grid figure:nth-child(3),
  body.page-editoria .project-gender-bender .project-grid figure:last-child {
    grid-column: 1 / -1;
  }

  body.page-editoria .project-gender-bender .project-grid img {
    height: auto;
    object-fit: initial;
  }

  body.page-editoria .slider-arrow {
    width: 20px;
    height: 42px;
  }
}

/* Real Carbonmade flipbook slider markup: manual prev/next behaviour.
   The scraped HTML carries stale inline widths/transforms from Swiper's
   last computed state; we neutralise those and drive the slider ourselves
   via js/flipbook-slider.js so the arrows reliably work regardless of
   whether Carbonmade's own Swiper bundle finishes initialising. */
/* IMPORTANT: do NOT override height on .swiper-wrapper/.swiper-slide.
   Carbonmade's real CSS sizes the slide image through a flex height
   chain: .flipbook has a fixed pixel height (inline style) -> that
   height cascades down via "height:100%" through .swiper-container,
   .swiper-wrapper and .swiper-slide -> down into .slide > .inner
   (flex column, height:100%) -> .media-wrapper (height:0; flex-grow:1,
   so it fills the remaining flex space) -> img (width/height:100%,
   object-fit:contain). Forcing height:auto anywhere in that chain
   breaks it and collapses the image to 0px even though "display" is
   correct - this was the actual bug behind blank flipbook slides. */
/* All slides stay laid out side by side at all times (display:flex,
   width:100%, flex-shrink:0) inside the flex .swiper-wrapper; only one
   is visible because the ancestor ".block.fluid .flipbook" already has
   overflow:hidden (all.css). flipbook-slider.js slides between them by
   animating the wrapper's own "transform: translateX(-index * width)"
   with a CSS transition -- this is the real sliding motion the original
   site has, instead of an instant display:none/flex swap. Note: no
   "transform: none !important" here (unlike earlier revisions) -- that
   would block the JS-driven transform, since !important in a stylesheet
   beats an inline style set from JS. */
.flipbook .swiper-wrapper {
  display: flex !important;
}

.flipbook .swiper-slide {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}

/* Force true edge-to-edge full-bleed on the flipbook, matching the
   original live site, regardless of any ancestor width constraint we
   haven't tracked down (the standard "break out of the container"
   technique: 100vw sized and re-centred with negative margins).

   This alone isn't enough though: the scraped HTML also carries a
   *fixed pixel* height (e.g. "height: 465.333px" inline), captured at
   whatever narrower viewport width Chrome happened to be at when the
   page was scraped. Once the box is stretched to a much wider 100vw,
   that stale height is now way too short for the image's real aspect
   ratio, so ".slide img { object-fit: contain }" shrinks the image
   down to fit the short height and letterboxes it -- which shows up
   as the same "margins on both sides" symptom, just caused by the
   image shrinking inside a full-width box instead of the box itself
   being narrow. The real site recomputes this height with JS on
   resize; we approximate that with a pure-CSS aspect-ratio instead,
   using the slide's own "data-aspect" (1.5 = 3/2 for every flipbook on
   this page), so height scales together with the new 100vw width. */
.flipbook {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  max-height: 80vh;
}

/* Each scraped .media-wrapper also carries its own inline
   "max-height: 465px" (baked from the scrape-time viewport), which
   clips the image regardless of how much flex space is actually
   available now that .flipbook is full-bleed and taller. Override it
   so the image can fill the full (now-correct) aspect-ratio height. */
.flipbook .media-wrapper {
  max-height: none !important;
}

/* THE ACTUAL BUG: all.css sets "left"/"right" on .flipper (e.g.
   ".flipbook.inset-flippers .flipper.prev { left: calc(...) }") but never
   sets "position" on it anywhere. Without position:absolute/relative/fixed,
   "left"/"right" are inert per the CSS spec, so the arrows were rendering
   as plain static in-flow 20x42px boxes instead of overlaying the slide --
   which made them invisible/clipped and unclickable. This is the real
   cause behind "only the first image shows, no arrows, clicking does
   nothing". Fix: position them absolutely, vertically centred, above the
   slide content. */
.flipbook .flipper {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.flipbook .flipper.swiper-button-disabled {
  opacity: 0.2;
  pointer-events: none;
}

/* Click-to-zoom lightbox (js/lightbox.js): the scraped all.css already
   drives the .background fade via opening/open/closing classes. The
   enlarged image itself grows/shrinks with its own inline transform
   (a FLIP animation from the clicked thumbnail's rect to a centred,
   viewport-fitted rect, written in lightbox.js) so no CSS transition is
   layered on top of carbon-slide here -- that would double up with the
   image's own transform and fight it. */
carbon-lightbox .background,
carbon-lightbox .viewport {
  cursor: none;
}
body.lightbox-open {
  overflow: hidden;
}

/* Carbonmade's real CSS hides ".block.animated" content and "img.lazy"
   images at opacity:0 until their scroll-reveal JS (corejs.js/blocks.js)
   adds a "visible"/"loaded" class via IntersectionObserver. That JS was
   built for Carbonmade's own hosted bootstrap and doesn't reliably fire
   in this reconstructed static site, which left several sections and
   images invisible. Force everything visible immediately instead. */
.block.animated > .content {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

img.lazy,
.desktop img.lazy {
  opacity: 1 !important;
}

div.page.loading .navigation,
div.page.loading .guts {
  visibility: visible !important;
  opacity: 1 !important;
}